【 CSS 】文字の中をアニメーションや写真で飾る（地味？）

　こんにちは！　今日の紹介するのはこれ！
　CSS でデザインされたテキストエフェクトです。数年前は結構インパクトがあったのですが、それでも地味なりに配置や使い方では「まだまだ使う用途としてはあるかな？」と、思ったので３種類ほど取り上げました。😀

テキストを色で塗りつぶすピュアなアニメーション

　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.