使用css的filter写鼠标滑过效果的实现示例
2020-08-18 04:09
756 查看
使用css的filter写鼠标滑过效果
<div class="filter-div"> <img class="filter-img" src="../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
鼠标放上之后
有Hover
这里用到css filter:brightness(100)给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%或者0,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1,如果想染图片设置成白色,值为100。
因为传统的hover给img换src第一次hover的时候会让图片闪白,因为需要重新加载图片,这样做的好处就是图片只需要加载一次,当然这种做法也是有局限性的,欢迎指正
到此这篇关于使用css的filter写鼠标滑过效果的实现示例的文章就介绍到这了,更多相关css的filter鼠标滑过内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 用css filter做鼠标滑过图片效果
- 纯css实现鼠标滑过弹出层效果
- CSS+jQuery实现的鼠标滑过图片周围图片变暗的效果
- 纯CSS实现鼠标滑过显示子菜单的二级菜单效果
- jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- css实现基本的鼠标滑过图片添加遮蔽层效果
- JS+CSS实现的鼠标滑过列表行渐变色效果
- JS+CSS实现的鼠标滑过列表行渐变色效果
- css实现鼠标滑过五角星高亮效果
- JS+CSS实现鼠标滑过时动态翻滚的导航条效果
- 纯CSS实现鼠标滑过下划线跟随效果
- 用css filter做鼠标滑过图片效果
- css效果:鼠标滑过放大图片
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- css实现文字竖排效果示例代码
- DIV+CSS:实现文本阴影效果示例;
- CSS控制当鼠标滑过时更换图片的效果
- 纯CSS实现鼠标移动切换图片示例
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果