はじめまして、WEBデザイナーの勝又と申します。よろしくお願いします。
このブログではCSS/JavaScriptを用いた演出などを中心に発信していきたいと思います。
初回となる今回は「背景を塗りつぶすCSS」をご紹介いたします。
backgroundに背景色を設定することでも可能ですが、細かい動きをつけたいときなどはもう一工夫必要になります。
実装例
今回は疑似要素”before”を用いて実装してみました。
背景色を付けたbefore要素をtransition:scale(X,Y)で伸ばすことで塗りつぶしています。
transitionでの制御ですが、transition-originを設定することで塗りつぶしの起点を設定することができます。
下記の例で四辺から伸ばしているとおりです。
See the Pen
hover背景塗りつぶし by 勝又隆行 (@katsumata)
on CodePen.
before要素の形を変更することで、塗りつぶし方を調整することも可能です。
下の例ではbeforeを円形にすることで、円状に塗りつぶしていくようにしています。
See the Pen
hover背景円形塗りつぶし by 勝又隆行 (@katsumata)
on CodePen.
アニメーションの開始をマウスオーバーにしましたが、inview.jsなどと組み合わせるとコンテンツの表示などにも応用できそうですね。
