如何使用css的过滤器写鼠标滑过效果 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要为大家展示了如何使用css的过滤器写鼠标滑过效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“如何使用css的过滤器写鼠标滑过效果”这篇文章吧。

使用css的过滤器写鼠标滑过效果

& lt; div 类=癴ilter-div"比; 　　& lt;才能img 类=癶ttps://www.yisu.com/zixun/filter-img", src=" . ./资产/图片/01 list.png "/> 　　

　　<时尚> 　　.filter-div { 　　宽度:67 px; 　　高度:50 px; 　　背景:# fff; 　　&:{徘徊　　背景:# 5 d7aae; 　　} 　　} 　　.filter-img { 　　宽度:67 px; 　　高度:50 px; 　　&:{徘徊　　过滤器:亮度(100); 　　} 　　} 　　

鼠标没有放上之前
无盘旋

鼠标放上之后
有悬停

这里用到css滤镜:亮度(100)给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%或者0,图像会全黑,值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1,如果想染图片设置成白色,值为100。

因为传统的悬停给img换src第一次盘旋的时候会让图片闪白,因为需要重新加载图片,这样做的好处就是图片只需要加载一次,当然这种做法也是有局限性的。

以上就是关于“如何使用css的过滤器写鼠标滑过效果”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注行业资讯频道。