Edited at

しずく感なCSS

More than 1 year has passed since last update.


背景

オッシャレなフロントエンドな方々のポートフォリオサイトを見ていたら作りたくなったので

いろいろな演出を模索していた。

思いついたのは液体のしずくのようなアニメーション…

これをCSSのみで実装したい…


結論

いろいろと悩んだ結果、下記でそれっぽい演出は可能…

<div class="t1">

<div class="t2"></div>
<div class="t3"></div>
</div>

    .t1{/*水滴を表現するためのステージ*/

position:absolute;
left:100px;
margin-top: 100px;
filter: blur(30px) contrast(100);/*<- ここが肝です*/
margin:auto;
width: 200px;
height:500px;
background-color:#333;
}
.t2{/*上に固定される水滴*/
position:absolute;
margin-top: 50px;
margin-left: 50px;
width: 100px;
height:100px;
background-color:#00f;
}
.t3{/*垂れる水滴*/
position:absolute;
width: 60px;
height:60px;
margin-top: 50px;
margin-left: 70px;
background-color:#00f;
animation: anime 1s linear infinite !important;
}
@keyframes anime{/*たれ方のアニメーション*/
0% {margin-top: 100px; }
100% {margin-top: 300px; }
}

See the Pen Waterっぽい by hashito (@hashito) on CodePen.


残った課題


  • 背景色を変えるとfilterがうまくかからず、思った色にできない

  • サイズを小さくしすぎるとfilterで水滴が消失してしまう

    良い解決策があればコメントいただけると助かります…


[追記]テキストでもやってみました。

テキストでも同様のことができることに気づいたので、「I'll be back」を溶岩に落とすアニメーションをつくってみました。

See the Pen Drop "I'll be back" in the melting furnace by hashito (@hashito) on CodePen.

結構無理矢理感…

フォントサイズがかなりデカくないと駄目なのでfontsize200pxにしてtransform:scale(0.2,0.2);にて縮小しています。

あと、'が小さすぎで見えなくなってしまっています。