加入收藏 | 设为首页 | 会员中心 | 我要投稿 济源站长网 (https://www.0391zz.cn/)- 数据工具、数据仓库、行业智能、CDN、运营!
当前位置: 首页 > 服务器 > 系统 > 正文

使用css的filter写鼠标滑过效果的实现示例

发布时间:2020-08-19 05:31:05 所属栏目:系统 来源:网络整理
导读:这篇文章主要介绍了使用css的filter写鼠标滑过效果的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下

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

<div class="filter-div"> <img class="filter-img" src=http://www.jb51.net/css/"../assets/images/01list.png"/> </div> <style> .filter-div { width: 67px; height: 50px; background: #fff; &:hover { background: #5d7aae; } } .filter-img { width: 67px; height: 50px; &:hover { filter: brightness(100); } } </style>

鼠标没有放上之前
无Hover

使用css的filter写鼠标滑过效果的实现示例

鼠标放上之后
有Hover

使用css的filter写鼠标滑过效果的实现示例

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

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

到此这篇关于使用css的filter写鼠标滑过效果的实现示例的文章就介绍到这了,更多相关css的filter鼠标滑过内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

(编辑:济源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读