CSSだけで流体シェイプを作ってみた

はじめに

流体シェイプ（Fluid Shape）とは、スライムのように液体が波打つ動きをする曲線の円形のことです。

実装する時は、プラグインを入れたりBlob Animationのようなアニメーションを細かく設定できる調整ツールで、HTMLにコードを貼り付けて表示するのが一般的かとは思いますが、実はCSSだけでも簡単に実装することができます。

実装編

このような流体シェイプを作っていきたいと思います。

See the Pen Untitled by 島尻 亮汰 (@ryota-shimajiri) on CodePen.

解説編

まずは以下のようなHTMLを用意します。
このfluidに流体シェイプのCSSを当てていきます。

index.html

  <div class="container">
    <div class="fluid"></div>
  </div>

一応、containerで見やすいように中央寄せしてます。これは別になくても良いです。
以下、CSSです。

style.css

.container {
    margin-top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fluid {
    background: aqua;
    width: 50vh;
    height: 50vh;
    animation: fluid-animation 10s ease 0s infinite normal;
}

@keyframes fluid-animation {
    0%, 100% {
        border-radius: 59% 41% 21% 79% / 62% 53% 47% 38%;
    }
    50% {
        border-radius: 26% 74% 52% 48% / 52% 32% 68% 48%;
    }
}

animationプロパティと@keyframesを使うことにより、CSSだけで簡単にアニメーションの設定を行うことができます。

animationの使い方は、

animation: {変数名} {変化時間} {進行具合 何秒目から開始するか} {ループ} {交互に反対再生するかどうか}

このようになります。

@keyframesは、アニメーションの開始から終了までの間にどのようなアニメーションを行うのかを指定することができます。
0%はアニメーション開始時で、100%はアニメーション終了時となります。
また0％〜100％の間で段階を指定することもできます。

肝心のアニメーションの中身ですが、やっていることは非常に単純で、
border-radiusで要素の境界の外側の角を丸めているだけです。

border-radiusの指定は、以下のサイトのようなジェネレーターを使用して、
実際に値を確認しながら調整すると良いかと思います。

Border Radiusジェネレーター
https://web-toolbox.dev/tools/border-radius-generator

応用編

@keyframesのfluid-animationにさらに色々と足してみます。
段階を細かく指定したり、色やサイズを変更することでより複雑な流体シェイプが出来上がりました。

これはあくまで一例ですが、このように色々と試しても面白いですね。

See the Pen Untitled by 島尻 亮汰 (@ryota-shimajiri) on CodePen.

参考