今回はCSSを用いたグリッジエフェクトについて紹介したい。
グリッチエフェクトはノイズのようにじじっと動くようなエフェクトで、HTML/CSSの実装は以下に紹介されている。
HTMLに関してはボタンを定義するだけなので非常にシンプルにできる。CSSはclip-pathや@keyframesを使用して細かくアニメーションを設定している。
ポリゴンの形状定義もあり、見本のCSSコードは非常に長くなっている。
見本のCSSコードをいじってグリッジエフェクトに必要なところに限定したのが以下のコードだが、ポリゴンの定義とグリッチエフェクトが連動していて、このあたりを作り変えるには、もとの解説をよく読んでみないとわからないので今後の課題としたい。
