【CSS】filterをホバーエフェクトやアニメーションに応用する
記事更新日：2022-02-04
filterが何に使えるのか、いまいちワカラナイ。
ホバーエフェクトやアニメーションに活用すると、面白くなるよ。
１．blurでぼかし
ホバーしたときに、背景をぼかしてみよう。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: blur(3px);
}
}
ぼかしは、いろんなところで使えそう。
２．brightnessで明暗
ホバーで明るくしてみよう。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: brightness(2);
}
}
逆にすれば、暗くもできるね。
３．invertで色反転
ちょっと珍しい、色反転。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: invert(1);
}
}
反転ってことは、黒が白になるってことかな？
invert(1)で100%反転
ウサギで試してみよう。
ここをクリックしてコードを見る
.rabbit {
filter: invert(1);
}
白くなった。
invert(0.5)で50%
1で白だから、0.5だとグレー。
ここをクリックしてコードを見る
.rabbit {
filter: invert(0.5);
}
自分の色に飽きたときは、使ってみよう。
４．drop-shadowで影
影は、使い方によって面白くなるよ。
ここをクリックしてコードを見る
.rabbit {
filter: drop-shadow(2px 4px 4px rgb(255, 1, 1));
}
【 Point 】
SVG画像なら、パスに色がつく。
赤いウサギ。カワイイ。
５．sepiaでセピア色
最初にセピアにしておいて、ホバーで標準に戻してみるよ。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
filter: sepia(2);
&:hover {
filter: sepia(0);
}
}
思い出に色がつく感じ。
６．grayscaleで白黒
次は、白黒写真を、ホバーで標準に戻してみる。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
filter: grayscale(3);
&:hover {
filter: grayscale(0) brightness(1.5);
}
}
白黒世界に彩りが生まれる瞬間。
７．contrastで色の強弱
コントラストを強めることもできる。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: contrast(1.5);
}
}
逆に、コントラスト弱めにしたら、やさしい世界の表現になるね。
８．hue-rotateで色変化〜アニメーションにすると美しい
これは、アニメーションにするのがオススメ。
ここをクリックしてコードを見る
.item {
animation: hue-anim 10s infinite;
}
@keyframes hue-anim {
0% {
filter: hue-rotate(180deg);
}
50% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(180deg);
}
}
【 Point 】
background-colorのアニメーションよりも軽量になる。
degの調整で、好みの色を見つけてみよう。
背景や、文字色がちょっとずつ変化するのを、よく見かけるね。
まとめ
filterに親しむと、色の調整がとっても楽しくなる。
色変化のアニメーションにfilter: hue-rotate
色を変えたいときに filter を使う
2022-02-04
編集後記：
この記事の内容がベストではないかもしれません。