一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

使用css的filter写鼠标滑过效果的代码实例

时间:2020-08-18 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下使用css的filter写鼠标滑过效果的代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

使用css的filter写鼠标滑过效果

鼠标没有放上之前

无Hover

鼠标放上之后

有Hover

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

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

热门栏目