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

网页制作 2024/12/23 佚名

3 2 1

使用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鼠标滑过

标签：

css,filter,鼠标滑过,css鼠标滑过

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

千金楼资源网 Copyright www.htabc.com

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

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

暂无“使用css的filter写鼠标滑过效果的实现示例”评论...

更新日志

2024年12月23日

2024年12月23日