【CSS】filterをホバーエフェクトやアニメーションに応用する
記事更新日:2022-02-04
![サムネイル](https://tsukiusagi.biz/wp-content/uploads/2022/01/css.png)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-1.png?resize=150%2C150&ssl=1)
filterが何に使えるのか、いまいちワカラナイ。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3-1.png?resize=150%2C150&ssl=1)
ホバーエフェクトやアニメーションに活用すると、面白くなるよ。
1.blurでぼかし
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
ホバーしたときに、背景をぼかしてみよう。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: blur(3px);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter1.gif?resize=214%2C189&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
ぼかしは、いろんなところで使えそう。
2.brightnessで明暗
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
ホバーで明るくしてみよう。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: brightness(2);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter2.gif?resize=214%2C189&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
逆にすれば、暗くもできるね。
3.invertで色反転
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
ちょっと珍しい、色反転。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: invert(1);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter3.gif?resize=214%2C189&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
反転ってことは、黒が白になるってことかな?
invert(1)で100%反転
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
ウサギで試してみよう。
ここをクリックしてコードを見る
.rabbit {
filter: invert(1);
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter7.png?resize=215%2C192&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
白くなった。
invert(0.5)で50%
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
1で白だから、0.5だとグレー。
ここをクリックしてコードを見る
.rabbit {
filter: invert(0.5);
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter8.png?resize=213%2C191&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
自分の色に飽きたときは、使ってみよう。
4.drop-shadowで影
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
影は、使い方によって面白くなるよ。
ここをクリックしてコードを見る
.rabbit {
filter: drop-shadow(2px 4px 4px rgb(255, 1, 1));
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter9.png?resize=217%2C192&ssl=1)
【 Point 】
SVG画像なら、パスに色がつく。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
赤いウサギ。カワイイ。
5.sepiaでセピア色
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
最初にセピアにしておいて、ホバーで標準に戻してみるよ。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
filter: sepia(2);
&:hover {
filter: sepia(0);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter4.gif?resize=214%2C189&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
思い出に色がつく感じ。
6.grayscaleで白黒
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
次は、白黒写真を、ホバーで標準に戻してみる。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
filter: grayscale(3);
&:hover {
filter: grayscale(0) brightness(1.5);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter5.gif?resize=214%2C189&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
白黒世界に彩りが生まれる瞬間。
7.contrastで色の強弱
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
コントラストを強めることもできる。
ここをクリックしてコードを見る
.item {
transition: filter 1s ease;
&:hover {
filter: contrast(1.5);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter6.gif?resize=214%2C189&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
逆に、コントラスト弱めにしたら、やさしい世界の表現になるね。
8.hue-rotateで色変化〜アニメーションにすると美しい
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
これは、アニメーションにするのがオススメ。
ここをクリックしてコードを見る
.item {
animation: hue-anim 10s infinite;
}
@keyframes hue-anim {
0% {
filter: hue-rotate(180deg);
}
50% {
filter: hue-rotate(0);
}
100% {
filter: hue-rotate(180deg);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter10.gif?resize=328%2C225&ssl=1)
【 Point 】
background-colorのアニメーションよりも軽量になる。
degの調整で、好みの色を見つけてみよう。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
背景や、文字色がちょっとずつ変化するのを、よく見かけるね。
まとめ
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
filterに親しむと、色の調整がとっても楽しくなる。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter11.gif?resize=606%2C487&ssl=1)
色変化のアニメーションにfilter: hue-rotate
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-filter10.gif?resize=328%2C225&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
色を変えたいときに filter を使う
2022-02-04
編集後記:
この記事の内容がベストではないかもしれません。