← All motions
Fullscreen ↗

Radar Sweep

レーダースイープ

No.
358
Category
Loop
Tech
CSS
【対象要素】
- 検索中・スキャン中を表すグラフィックに適用する

【演出内容】
- 同心円の上を扇形の走査線が回転し続け、ときどき反応点が明滅する

【品質要件】
- 走査線は進行方向側をくっきり、後方をフェードさせる
- 反応点は走査線が通過したタイミングに合わせて光らせると自然に見える
- ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる
- prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する

Prompts and demo code are free to use in your own projects. See About.