css3实现 png 图片高亮自左到右过渡的方式 (一张图实现不遮住png的透明背景)

一、用一张图解释想要实现的效果。

二、思考：如何实现？实现的多种方式。

2.1、2图代码及实现效果

我们先去设想一下，如果是两张图那么很简单的就实现了，先说一下两张图的实现思路：

1. 创建一个包裹div，创建两个divbox模块
2. div模块内部都是img标签 给img标签设置固定的宽高
3. 包裹div设置相对定位，两个divbox设置绝对定位，box模块2，设置宽度0，overflow:hidden;
4. 设置对应的鼠标移入过渡效果 实现功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2张图实现方式</title>
  </head>
  <style>
    .imgBox {
      position: relative;
      height: 100px;
    }
    .box1 {
      position: absolute;
      width: 100px;
      height: 100px;
      opacity: 0.6;
      z-index: 1;
    }
    .box2 {
      position: absolute;
      width: 0px;
      height: 100px;
      overflow: hidden;
      transition: width 2s ease;
    }
    .box1:hover + .box2 {
      width: 100px;
    }
  </style>
  <body>
    <div class="imgBox">
      <div class="box1">
        <img class="img1" width="100" height="100" src="./15825954118079008.jpg" alt="" />
      </div>
      <div class="box2">
        <img class="img2" width="100" height="100" src="./15825954118079008.jpg" alt="" />
      </div>
    </div>
  </body>
</html>

在这里的话，是设置了透明度，当然也可以直接采用两张背景图 一个是浅图一个是深图，那如果不设置透明度两张图的话 需要给上方的.box2同样设置一个hover伪类

2.2、单图过滤实现效果

那么在我们如果在只有单张图的情况下，我们要考虑的是如果当前这个图片是png，那么我们如何用单图去实现呢？在实现的情况下我们要考虑的情况是如何不碰及png图片的空白透明区域？直接在图片上面放一个遮罩层，肯定是行不通的，我们就要从其他的角度去变换角度思考问题，我们必须要将图片变换颜色，也就是变换成我们指定的颜色，从而实现伪两张图片的效果，这样其实也就是实现了 单图 的过渡效果：

1. 创建一个包裹div，创建两个box模块
2. box1模块内部是img标签 给img标签设置固定的宽高，box2为空背景模块，设置背景图及过滤效果
3. 包裹div设置相对定位，两个divbox设置绝对定位，包裹div、box2 设置 overflow:hidden;
4. 设置对应的鼠标移入过渡效果 实现功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单图 png 过滤效果</title>
  </head>
  <style>
    .imgBox {
      position: relative;
      height: 100px;
      overflow: hidden;
    }
    .box2 {
      position: absolute;
      left: -100px;
      width: 0;
      height: 100px;
      border: none;
      overflow: hidden;
      transition: width 2s ease, filter 2s ease, border-right 2s ease;
      z-index: 1;
      filter: drop-shadow(100px 0 0 rgb(211, 211, 211));
      background: url("./favicon.png") no-repeat;
      background-size: 100px 100px;
    }
    .box1:hover + .box2 {
      width: 100px;
      border-right-width: 100px;
    }
    .box2:hover {
      width: 100px;
      border-right-width: 100px;
    }
    .box1 {
      position: absolute;
      width: 100px;
      height: 100px;
    }
  </style>
  <body>
    <div class="imgBox">
      <div class="box1">
        <img class="img1" width="100" height="100" src="./favicon.png" alt="" />
      </div>
      <div class="box2"></div>
    </div>
  </body>
</html>

在这里的话是使用了 css3的 filter: drop-shadow进行变更了 png 颜色，这个属性相当于是我们利用了图片的阴影效果，右移动了阴影，而原图在左边-100px的位置，我们利用鼠标过渡移入是border-width的宽度进行变化，这个变化出来的效果其实就是反转的 png 图片，从而利用这种效果，达到了我们想要的效果。

2.3、单图遮罩实现效果

对应的我们实现了上方的一个图片过滤的变更颜色效果，那么就要思考能不能用其他的方式实现 png 变更颜色呢？参考 张鑫旭大大的 纯CSS实现任意格式图标变色的研究 CSS遮罩实现任意颜色图标 CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示，透明区域隐藏。利用这个mask我们就可以实现对png图片的颜色转化，从而也就能实现对应的单图遮罩过渡效果：

1. 创建一个包裹div，创建两个image_copy模块
2. image_copy模块是一个背景图 image_copy_box模块中包裹着我们要变更颜色的 png 背景图
3. 同样是利用定位及 overflow:hidden; 效果设置宽度实现过渡
4. 设置对应的鼠标移入过渡效果 实现功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单图遮罩实现效果</title>
  </head>
  <style>
    .box {
      position: relative;
    }
    .image {
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: rgb(255, 0, 0);
      -webkit-mask: url("./favicon.png") no-repeat;
      mask: url("./favicon.png") no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }
    .image_copy_box {
      position: absolute;
      z-index: 100;
      width: 0px;
      height: 100px;
      overflow: hidden;
      transition: all 2s ease;
    }
    .image_copy:hover + .image_copy_box {
      width: 100px;
    }
    .image_copy_box:hover {
      width: 100px;
    }
    .image_copy {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: url("./favicon.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
    }
  </style>

  <body>
    <div class="box">
      <div class="image_copy"></div>
      <div class="image_copy_box">
        <div class="image"></div>
      </div>
    </div>
  </body>
</html>

在这里也就是利用了mask 及 mask-size 实现了png颜色的变更，从而实现了效果。