ふわふわ浮遊する装飾要素
背景に置いた複数の幾何シェイプ（円や角丸の四角）が、時間差でふわふわと浮き沈みしながら回転する装飾アニメです。各シェイプは position:absolute で配置し、共通の @keyframes で translateY と rotate を往復させつつ、 animation-delay をずらすことでバラバラ…
解説
背景に置いた複数の幾何シェイプ（円や角丸の四角）が、時間差でふわふわと浮き沈みしながら回転する装飾アニメです。各シェイプは position:absolute で配置し、共通の @keyframes で translateY と rotate を往復させつつ、animation-delay をずらすことでバラバラに動いて見せています。CSS のみで完結し、見出しは z-index で前面に保たれるため可読性を損ないません。
向いている場面
- トップビジュアルに遊び心と動きを足したいブランドサイト
- キッズ・ライフスタイル・ポップな商材の LP
- 余白が広い見出しまわりの寂しさを和らげたいとき
シェイプの色・大きさ・位置はそれぞれの fl__s--n クラスで個別に設定でき、丸と角丸を border-radius で混ぜると表情が出ます。動きの幅は @keyframes の translateY 量で調整します。装飾目的のため、背景要素には aria-hidden 相当の扱いで支障ありません。常時ループなので、動きに敏感なユーザー向けに prefers-reduced-motion で静止させる配慮を入れておくとよいでしょう。
使用例・適したシーン
- カード装飾
- 見出し下線
- ホバー強調
よくある質問
シェイプの色や形を変えられますか？
各シェイプは fl__s--1 〜 fl__s--4 のクラスで個別に設定されています。background で色、width と height で大きさ、border-radius で丸や角丸を変更できます。50% で円、30% 前後で角丸の四角になります。
見出しの文字に被って読みにくくなりませんか？
見出しには z-index が指定され、シェイプより前面に表示されます。そのため文字が埋もれることはありません。色のコントラストだけ背景に合わせて確認しておくと安心です。