背景
鼠标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)
参数类型比较多,这里就不一一介绍了,文档有详细的说明。
实现思路
我们这个效果主要用到了 偏移量和颜色的的参数。大体思路如下
- 先用滤镜熟悉创建一个hover之后的svg图像,然后隐藏起来
- 当用户hover之后,使用transform来实现反向偏移,从而显示出来
先用drop-shadow
创建一个红色的星星
.svg{
width:30px;
filter:drop-shadow(30px 0 red)
}
然后在img标签外面包一个盒子,设置overflow:hidden
来隐藏红色星星
最后给hover
加上一个 transform
设置偏移量就可以了
完整代码
<!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>
兼容性
不需要兼容IE的话,是个非常不错的选择