GIF2019.05.15今回はCSSとGIFアニメだけでテキストをかっこ良く表現する方法をご紹介します。具体的に説明すると、まずGIFアニメ画像を背景に敷いて、任意のテキストでマスクをかけるという感じです。サイトやページのファーストビューにこれをポンと配置するだけでインパクトを出すことが出来ます。サンプルまずはサンプルで確認してみてください。背景に敷くGIFアニメ次第では、ソリッドな感じにもかわいい感じにも出来そうです。CodePen.実装方法CSSHTMLはテキストを打てばよいだけで、CSSは下記のようになります。center;}background-clipプロパティをつかっているのがポイントかと。このプロパティの値を「text」とすることで、背景に敷いた画像を前景のテキストの中に表示することができます。文字数が多い時は、上記CSSにbackground-size:coverを追記するか、リピートしても不自然にならないようにシームレスなGIF画像を用意する必要があります。GIF画像のサイズ自体を大きくしてしまうか。background-size:coverでの対応はGIF画像を引き伸ばしてしまうことになるので、画像が荒れてしまいあまり綺麗に表示できません。GIF画像自体を大きくしてしまうのも、あまり凝ったアニメーションにしている場合読み込み自体が遅くなってしまいます。文字数が多いテキストにこの表現を実装するときは、シームレスなGIF画像をリピートする方法が一番良いかと個人的には思います。