背景
オッシャレなフロントエンドな方々のポートフォリオサイトを見ていたら作りたくなったので
いろいろな演出を模索していた。
思いついたのは液体のしずくのようなアニメーション…
これを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.
結構無理矢理感…
フォントサイズがかなりデカくないと駄目なのでfontsize
を200px
にしてtransform:scale(0.2,0.2);
にて縮小しています。
あと、'
が小さすぎで見えなくなってしまっています。