文字にgifアニメをのせてみた

タイトルの通り、
html・css・gifのみで、アニメーションがテキストの形に切り抜かれたように見える方法を試してみました。
参考：https://codepen.io/methodoccasion/pen/ZWqbRb

デモ：開いてみて！

今回の場合、外部GIFファイルを設定しています。
ソースコード参考
【html】

大枠を囲うのが
div id="container"

このようにクラス名を付けました。


【css】

html {
background-color: #292731;
}
.D{
background:url("https://i.giphy.com/8SylEdgXn0BIQ.gif") repeat;
background-position:10px;
-webkit-background-clip: text;
color: transparent;
font-size:400px;
font-family:Helvetica;
font-weight:bold;
margin:0 auto;background-position-x: 52%;
background-position-y: 48px;
}

.moveBox {
margin:0 auto;
width:300px;
}


このくらいで、JSは必要ありません。
あとはGIFアニメを用意してcssに記述のあるパスを書き換えればいいだけです。

サイズもフォントサイズを小さめにしても良いですが、
背景のGIFアニメの位置は「background-position」で数値を調整してくださいね。