CSS で画像とテキストどちらにも使えるグリッチエフェクトを実装する方法を紹介します。 例えば、電脳的な雰囲気のあるサイトを作りたいときに役立つテクニックです。 CSS でグリッチエフェクトを実装する方法 点滅アニメーションを実装する方法 歪みアニメーションを実装する方法 振動アニメーションを実装する方法 CSS でグリッチエフェクトを実装する方法 CSS だけでアナログな雰囲気のあるグリッチエフェクトを実装するために CSS プロパティ animation を使用します。 画像とテキストに適用した場合の完成イメージと、ベースの HTML とコピペですぐ使える CSS はこちら。 <!-- ↓ 画像の場合 --> <div class="flash"><div class="skew"><div class="glitch"><img src="画像URL" alt="" /></div>
![CSS でグリッチエフェクトを実装する方法 - by Takumi Hirashima](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec33fe1b627738319ad202ae8e3a2ed446286914/height=288;version=1;width=512/https%3A%2F%2Fhirashimatakumi.com%2Fwp%2Fwp-content%2Fthemes%2Ftakumihirashima%2Fimg%2Fogp.png)