作成:2016/11/7 更新:2016/11/07 Web制作 > 404ページやランディングページに今時のおしゃれなエフェクトを付与したい。今回はCSSのみで簡単に実装できる、背景を動かすエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 テキスト部分だけの背景を動かす ストライプなど繰り返しの要素を作るrepeating-linear-gradient関数(repeating-linear-gradient - CSS | MDN)を使い、グラデーションの繰り返しを作ります。さらにmix-blend-mode: screen;で、 要素を混合しています。 mix-blend-mode: screen; background-image: repeating-linear-gradient(-45deg, transparent, tran
![CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1ec5a5fc52c882ef8f8760ca9968f9877dd54b64/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fcss_background_animation.jpg)