[CSS]画像にビデオや砂の嵐のノイズをのせるスタイルシート

画像にビデオや砂の嵐のノイズをのせるスタイルシートをMatthew James Taylorから紹介します。

デモのキャプチャ

Make website images look like a video with this CSS effect
demo

元の画像は下のようになっていて、上のようにビデオのノイズをのせたエフェクトを適用します。

デモのキャプチャ

元の画像

アニメーションGIFを利用して、砂の嵐のエフェクトを適用したデモもあります。

デモのキャプチャ

砂の嵐のエフェクト
※デモではザァーとアニメしてます

実装はimg要素で画像を配置し、空spanと一緒にdivで括ります。
若干動作がもたつきますが、IE6もサポートしています。

元記事の下の方で、画像を含めたファイル一式がダウンロードできます。

sponsors

top of page

©2018 coliss