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

发布时间:2022-04-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用css的filter写鼠标滑过效果的实现示例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

使用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;
      &amp;: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鼠标滑过内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!

@H_360_25@

脚本宝典总结

以上是脚本宝典为你收集整理的使用css的filter写鼠标滑过效果的实现示例全部内容,希望文章能够帮你解决使用css的filter写鼠标滑过效果的实现示例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。