点滅カーソル付きコードタイトル
見出しの末尾に、ターミナルのように点滅するカーソル「|」が付いたコード風タイトルです。カーソルは span に幅と高さを与えた縦長のブロックで、 animation:blinkc .8s step-end infinite と @keyframes blinkc の 50%{opacity:0} によって、フェード…
解説
見出しの末尾に、ターミナルのように点滅するカーソル「|」が付いたコード風タイトルです。カーソルは span に幅と高さを与えた縦長のブロックで、animation:blinkc .8s step-end infinite と @keyframes blinkc の 50%{opacity:0} によって、フェードせずカチッと消えて点く本物のカーソルらしい点滅を再現しています。フォントは等幅（SF Mono 系）、文字色はシアン、背景は濃紺で、コンソール画面の雰囲気を出しています。
映えるサイト
- エンジニア向けサービスやテックブログの見出し
- 開発ツール・SaaS のヒーローコピー
- 「$ コマンド」風に演出したいランディングページ
カーソルの色は .bc-title__cursor の background、点滅の速さは .8s の値で調整できます。step-end をやめると点滅がフェードに変わるので、本物らしさを出すなら維持してください。無限ループのアニメーションのため、動きが苦手な閲覧者には prefers-reduced-motion で点滅を止める配慮が望ましいです。負荷は opacity の切り替えのみで軽量です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
カーソルの点滅速度や色は変えられますか？
速度は animation の .8s を、色は .bc-title__cursor の background を変えれば調整できます。値を小さくすると速く点滅し、大きくするとゆっくりになります。
なぜ滑らかに消えず、カチッと点滅するのですか？
@keyframes に step-end を使い、中間のフェードを飛ばしているためです。これにより本物のターミナルカーソルのように瞬時に消えて点く動きになります。フェードさせたい場合は step-end を外してください。