リアルタイム表示風 点滅ドット
「ライブ配信中」「オンライン中」のように 現在進行形の状態 を示す、赤い点が脈打つように点滅するバッジです。CSS だけで動き、 @keyframes lv-blink で opacity を 1 から 0.4 へ往復させて点滅を作り、同時に box-shadow を 0 から 8px へ広げながら透明にすることで…
解説
「ライブ配信中」「オンライン中」のように現在進行形の状態を示す、赤い点が脈打つように点滅するバッジです。CSS だけで動き、@keyframes lv-blink で opacity を 1 から 0.4 へ往復させて点滅を作り、同時に box-shadow を 0 から 8px へ広げながら透明にすることで、ドットから波紋が外へ広がるパルス効果を重ねています。infinite 指定で 1.2 秒ごとに繰り返します。
こんなところに
- 動画配信やセミナーの「配信中」表示
- チャットやサポートの在席ステータス
- リアルタイム更新中であることの通知バッジ
点滅の速さは 1.2s を、波紋の広がりは box-shadow の 8px を変えて調整します。色は background と rgba(220,80,80,...) を揃えて変えると緑のオンライン表示などにも転用できます。常時点滅する要素なので、点が多すぎると画面がうるさくなります。動きを減らしたい利用者向けに prefers-reduced-motion で点滅を止め、色だけで状態を伝える代替を用意すると安心です。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
波紋のように広がる輪は何で表現していますか
box-shadow を 0 から 8px へ広げながら透明にする @keyframes で表現しています。影を外側へ伸ばしつつ消すことで、ドットから波が広がるパルス効果が生まれています。
緑のオンライン表示に変えられますか
できます。ドットの background と、@keyframes 内の box-shadow に使われている rgba の色を緑系に揃えて変更すれば、在席中などの表示に転用できます。