ウネウネ動くスライムのCSSジェネレーター
有機的な形状でウネウネと動くスライム（Blob）風のCSSを生成するツールです。border-radiusを細かく調整して、柔らかい印象の装飾アイテムを作成できます。
プレビュー
<div class="slime-blob"></div>.slime-blob {
width: 300px;
height: 300px;
background: {{color}};
border-radius: {{tl_h}}% {{tr_h}}% {{br_h}}% {{bl_h}}% / {{tl_v}}% {{tr_v}}% {{br_v}}% {{bl_v}}%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
animation: slime-morph {{speed}}s ease-in-out infinite alternate;
}
@keyframes slime-morph {
0% {
border-radius: {{tl_h}}% {{tr_h}}% {{br_h}}% {{bl_h}}% / {{tl_v}}% {{tr_v}}% {{br_v}}% {{bl_v}}%;
}
100% {
border-radius: {{tr_h}}% {{tl_h}}% {{bl_h}}% {{br_h}}% / {{tr_v}}% {{tl_v}}% {{bl_v}}% {{br_v}}%;
transform: scale(1.05) rotate(3deg);
}
}機能、使い方
- 有機的にウネウネと形を変える「スライム（Blob）」風のCSSを生成します。
border-radiusの「水平半径 / 垂直半径」の8つの値を個別に調整することで、自由な形状を作成可能です。- アニメーションは
alternate指定により、設定した形状からその対角反転した形状へと滑らかに変化します。 - カラーやアニメーション速度（秒数）も自由にカスタマイズ可能です。
CSSプロパティの解説
border-radiusプロパティでスラッシュを使用すると、角の丸みの水平方向と垂直方向を別々に指定できます。これにより、正円ではない独特の歪んだ形状を作り出すことができます。
また、アニメーションの 100% 地点では設定値を入れ替えるような指定を行っているため、形状が「呼吸」しているような動きになります。
