文章目录
一、用一张图解释想要实现的效果。二、思考：如何实现？实现的多种方式。2.1、2图代码及实现效果2.2、单图过滤实现效果2.3、单图遮罩实现效果一、用一张图解释想要实现的效果。
二、思考：如何实现？实现的多种方式。
2.1、2图代码及实现效果
我们先去设想一下，如果是两张图那么很简单的就实现了，先说一下两张图的实现思路：
创建一个包裹div，创建两个divbox模块div模块内部都是img标签 给img标签设置固定的宽高包裹div设置相对定位，两个divbox设置绝对定位，box模块2，设置宽度0，overflow:hidden;设置对应的鼠标移入过渡效果 实现功能
<!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图片的空白透明区域？直接在图片上面放一个遮罩层，肯定是行不通的，我们就要从其他的角度去变换角度思考问题，我们必须要将图片变换颜色，也就是变换成我们指定的颜色，从而实现伪两张图片的效果，这样其实也就是实现了 单图 的过渡效果：
创建一个包裹div，创建两个box模块box1模块内部是img标签 给img标签设置固定的宽高，box2为空背景模块，设置背景图及过滤效果包裹div设置相对定位，两个divbox设置绝对定位，包裹div、box2 设置 overflow:hidden;设置对应的鼠标移入过渡效果 实现功能
<!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图片的颜色转化，从而也就能实现对应的单图遮罩过渡效果：
创建一个包裹div，创建两个image_copy模块image_copy模块是一个背景图 image_copy_box模块中包裹着我们要变更颜色的 png 背景图同样是利用定位及 overflow:hidden; 效果设置宽度实现过渡设置对应的鼠标移入过渡效果 实现功能
<!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颜色的变更，从而实现了效果。
如果觉得《css3实现 png 图片高亮自左到右过渡的方式 (一张图实现不遮住png的透明背景)》对你有帮助，请点赞、收藏，并留下你的观点哦！
