ブロブ（液体）モーフィング
不定形のシェイプがぐにゃりと形を変え続ける、液体的なモーフィングアニメです。秘密は border-radius の 8 値記法で、 border-radius:42% 58% 70% 30% / 45% 45% 55% 55% のようにスラッシュ前後で水平・垂直の丸みを別々に指定できる性質を利用しています。
解説
不定形のシェイプがぐにゃりと形を変え続ける、液体的なモーフィングアニメです。秘密は border-radius の 8 値記法で、border-radius:42% 58% 70% 30% / 45% 45% 55% 55% のようにスラッシュ前後で水平・垂直の丸みを別々に指定できる性質を利用しています。@keyframes でこの値を 3 段階に変化させ、animation:8s ease-in-out infinite で滑らかにループ。背景はグラデーション、filter:blur(.4px) で輪郭をわずかに溶かし、有機的な質感を出しています。JavaScript は不要で CSS だけで動きます。
使う場面
- ヒーロー背景に置くトレンディな装飾ブロック
- アイコンや写真を囲むやわらかいマスク形状
- ローディング中に目を引くアクセント要素
サイズは widthheight、速さは animation の秒数で調整します。色はグラデーションの停止色を差し替えるだけでブランドに合わせられます。border-radius の各％を変えると変形のクセが変わります。背景の装飾として使うときは z-index と重なりに注意し、前面テキストの可読性を損なわないよう配置します。動きを抑える設定のユーザーには prefers-reduced-motion でアニメを止める配慮を添えると安心です。
使用例・適したシーン
- ヒーロー背景
- セクション装飾
- イラスト的な訴求
よくある質問
形の変わり方はどう調整しますか。
@keyframes内のborder-radiusの8つの値を変えると変形のクセが変わります。スラッシュの前が水平方向、後ろが垂直方向の丸みです。複数の組み合わせを試して、好みの揺らぎを見つけるのが手早いです。
色や動く速さは変えられますか。
色はbackgroundのlinear-gradientの停止色を書き換えればブランドカラーに合わせられます。速さはanimationの秒数（初期8s）で調整し、長くするとゆったり、短くすると活発に動きます。