css3实现 png 图片高亮自左到右过渡的方式 (一张图实现不遮住png的透明背景)
一、用一张图解释想要实现的效果。
二、思考：如何实现？实现的多种方式。
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颜色的变更，从而实现了效果。