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

发布时间：2020-08-13 16:39:14 作者：如果美是罪

这篇文章主要介绍了使用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;
      &: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鼠标滑过内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：鼠标滑过 Filter css

css3 filter属性的使用简介
这篇文章主要介绍了css3 filter属性的使用简介，帮助大家更好的理解和学习使用css3，感兴趣的朋友可以了解下
2021-03-30
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
这篇文章主要介绍了CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-02-24
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
这篇文章主要介绍了CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以
2020-11-30
css中filter属性和backdrop-filter的应用与区别详解
这篇文章主要介绍了css中filter属性和backdrop-filter的应用与区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面
2020-09-14
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
这篇文章主要介绍了详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友
2020-08-24
CSS filter 有什么神奇用途
CSS filter属性将模糊或颜色偏移等图形效果应用于元素形成滤镜，滤镜通常用于调整图像，背景和边框的渲染。本文给大家分享CSS filter 有什么神奇用途，感兴趣的朋友跟随小
2021-05-25

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容