DEMO
CODE
<div class="demo-stage fsb-stage"><span class="fsb-shape s1"></span><span class="fsb-shape s2"></span><span class="fsb-shape s3"></span><span class="fsb-shape s4"></span><span class="fsb-label">FLOATING SHAPES</span></div>
.fsb-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:radial-gradient(circle at 30% 30%,#1a1030,#0F0F12); min-height:300px; overflow:hidden; }
.fsb-shape { position:absolute; border-radius:30%; background:linear-gradient(135deg,rgba(233,27,137,.5),rgba(123,55,168,.5)); animation:fsb 6s ease-in-out infinite; }
.fsb-shape.s1 { width:60px; height:60px; left:15%; top:25%; animation-delay:0s; }
.fsb-shape.s2 { width:40px; height:40px; left:70%; top:20%; animation-delay:1.2s; border-radius:50%; }
.fsb-shape.s3 { width:80px; height:80px; left:75%; top:60%; animation-delay:2.4s; }
.fsb-shape.s4 { width:30px; height:30px; left:25%; top:65%; animation-delay:3.6s; border-radius:50%; }
@keyframes fsb { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-22px) rotate(40deg); } }
.fsb-label { position:relative; color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.25em; font-size:1rem; }
AI PROMPT
幾何学シェイプがゆっくり浮遊・回転する背景をCSSだけで作って。複数の絶対配置シェイプ（border-radiusで角丸/円、linear-gradientで配色）に @keyframes で 50%:translateY(-22px) rotate(40deg) の上下＋回転を 6s ease-in-out infinite。各シェイプに animation-delay をずらして動きをばらけさせる。LP・ヒーローの奥行き演出に。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
幾何学シェイプがゆっくり浮遊・回転する背景。やわらかいグラデと相性が良く、LP・ヒーローに奥行きを与える。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ヒーローセクションの背景・セクション区切り・装飾レイヤーなど、空気感づくりに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。