こんにちは! 今日の紹介するのはこれ!
CSS でデザインされたテキスト エフェクトです。数年前は結構インパクトがあったのですが、それでも地味なりに配置や使い方では「まだまだ使う用途としてはあるかな?」と、思ったので3種類ほど取り上げました。😀
テキストを色で塗りつぶすピュアなアニメーション
background-repeat : repeat-x ; で画像を水平に一列表示にし、背景の適用範囲を指定するために
background-clip : text ; で画像を文字でマスクできるようにして(テキスト部分に背景画像を適応させる)
アニメーションをかけているシンプルなものです。
See the Pen OJNjEqa by bens-user (@ben1099user) on CodePen.
水でテキストを埋める効果
これも CSS のソースは上記のものと差ほど変わりません。
@keyframes 内の background-position で高さ調整してアニメーションをかけています。
See the Pen GRZvGWO by bens-user (@ben1099user) on CodePen.
文字の中を風景に見立てる
上記同様、background-clipを指定して、「-webkit-text-fill-color : transparent」により文字を透明化にさせています。代わりに「color: rgba(0,0,0,0)」でもOKです。
See the Pen BaKdPxa by bens-user (@ben1099user) on CodePen.
コメント