今回はtransitionとfilterプロパティ(invert hue-rotate brightness sepia saturate blur contrast grayscale) の応用です。画像が美しく変化するCSShoverアニメーションを3つご紹介します。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
1. filter:blurの応用!hoverするとぼやけている画像が動的に変化するfilterエフェクト
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- hover前・hover後のimage1(ぼかしあり)・image2(ぼかしなし)クラスを用意
- .image1、.image2にtransitionでエフェクトの速度調整
- .image1にfilter:blur()でぼかし度合いを調整
- .image2のmargin-leftをhover前後で325→0に指定することで右から左へスライド
- 画像の階層・filter:blurの使い方・transitionで動きをつけるなど応用的な実装を実現
2. invert × hue-rotate × brightnesshoverで光り輝く星空のようなfilterエフェクト
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- hover前・hover後のimgスタイルを用意
- hover前のimgにtransitionでエフェクトの速度調整・filter: invert() hue-rotate() brightness()で階調反転・色相回転・明るさの調整
- hover後のimgにも同じくfilter: invert() hue-rotate() brightness()で階調反転・色相回転・明るさの調整
- 今回はhover前:invert(3%) hue-rotate(0) brightness(500%)、hover後:invert(0%) hue-rotate(2000deg) brightness(500%)で光り輝く星空のようなエフェクトを実現
3. contrast × grayscale × brightness × saturate × invert+hoverで感動するほどの景色に変わるfilterエフェクト
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- hover前・hover後のimgスタイルを用意
- hover前のimgにtransitionでエフェクトの速度調整・filter: contrast() grayscale() brightness() saturate() invert()でコントラスト・白黒度合い・明るさ・色彩・階調反転を調整
- hover後のimgにも同じくfilter: contrast() grayscale() brightness() saturate() invert()でコントラスト・白黒度合い・明るさ・色彩・階調反転を調整
- 今回はfilterプロパティを応用して白黒画像が100倍美しく変化するエフェクトを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります