2024.06.03

ウネウネと動く液体シェイプの制作方法【STUDIO】

kishioka-yasuo

STUDIOでウネウネと動く液体シェイプをCSSを使って、表現する方法をご紹介します。

サンプルページはこちら

球体の作成

ボックスツールを使用して、球体を作成します。

CSSの設定

ボックスの項目から「Blank」を画面に配置します。
右側の設定画面を表示させ、埋め込みコードに以下のcssをコピー&ペーストします。
CSSでは、色の設定、アニメーションの動きや動く時間の設定を行えます。
設定後、ボックスは見える必要がないので最小限のサイズに変更し、色も透明にしておきましょう。

CSS

<style>
#fluid {
  width:40vh;/*横幅*/
  height: 40vh;/*縦幅*/
  background:#ff0000;/*背景色*/
  animation: fluidrotate 30s ease 0s infinite;/*アニメーションの設定*/
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}
</style>