背景装飾の定番、ゆっくり漂う半透明の円。duration違いの同じアニメーションを重ねて有機的な動きを作ります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
3つの円はすべて同じ@keyframes floatを共有していますが、animation-durationとdelayをバラバラにすることで、同期しない有機的な漂いになります。alternateで往復させているのでループの継ぎ目はありません。「同じ動き×違う周期」は少ないコードで複雑さを演出する常套手段です。
円の数を増やすほどリッチになりますが、blurは負荷が高めなので枚数と半径はほどほどに。
背景に、ふわふわと漂う半透明の丸い玉を複数配置して。translateのkeyframesで各玉を別々のタイミング・速度で動かして。
浮かぶ玉の背景にfilter: blurをかけて柔らかい光の玉にして。パフォーマンスを考えてwill-changeも検討して。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。