使用css的filter来实现svg背景的hover变色效果

2,658

背景

鼠标hover来实现active效果相比想必大家是常做。改变文字和图片颜色是常用的套路。 但是我遇到的是的资源是svg而且是远程资源,所以只能用背景图,以前用的都是字体图标,用color属性就能控制了,svg背景图该如何操作呢?

css filter属性

filter: none | blur() | brightness() | contrast() 
| drop-shadow() | grayscale() | hue-rotate() | invert()
| opacity() | saturate() | sepia() | url();

可以看到熟悉还是比较多的,可以调整模糊、明暗、对比度等等。 我们这个场景需要用的属性为 drop-shadow

drop-shadow (h-shadow v-shadow blur spread color)

参数类型比较多,这里就不一一介绍了,文档有详细的说明。

实现思路

我们这个效果主要用到了 偏移量和颜色的的参数。大体思路如下

  1. 先用滤镜熟悉创建一个hover之后的svg图像,然后隐藏起来
  2. 当用户hover之后,使用transform来实现反向偏移,从而显示出来

先用drop-shadow创建一个红色的星星

.svg{

    width:30px;

    filter:drop-shadow(30px 0 red)

}

image.png

然后在img标签外面包一个盒子,设置overflow:hidden来隐藏红色星星 最后给hover加上一个 transform设置偏移量就可以了

chrome-capture.gif

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
<style>
.img-box{ width:30px;overflow:hidden;}
.img-box:hover .svg{transform:translateX(-30px);}
.svg{ width:30px;filter:drop-shadow(30px 0 red)}
</style>
</head>
<body>
<div class="img-box">
    <img class="svg" src="./demo.svg">
</div>
</body>
</html>

兼容性

image.png

不需要兼容IE的话,是个非常不错的选择