给大家分享一个用CSS 3.0写的图片颜色过滤的特效，效果如下：
以下是代码实现，欢迎大家复制粘贴和收藏。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0中图片颜色过滤特效</title>
<style>
.box{
width:810px;
margin:0 auto;
display: flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
}
.img-wrapper {
width: 400px;
height: 400px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {
height: 400px;
/* 添加过渡效果 */
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
.img-wrapper img:hover {
/* 鼠标悬停放大 */
transform: scale(1.1);
}
.img-wrapper {
display: inline-block;
box-sizing: border-box;
border: 3px solid #000;
}
.grayscale-img {
/* 灰度过滤 */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
/* 灰度过滤 */
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
.sepia-img {
/* 深褐色过滤 */
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
/* 深褐色过滤 */
-webkit-filter: sepia(0);
filter: sepia(0);
}
img{
height:100%;
width:100%;
}
</style>
</head>
<body>
<div class="box">
<!-- 灰度过滤 -->
<div class="img-wrapper">
<img class="grayscale-img" src="https://img-blog.csdnimg.cn/2020032211021728.png" />
</div>
<!-- 深褐色过滤 -->
<div class="img-wrapper">
<img class="sepia-img" src="https://img-blog.csdnimg.cn/2020032122230564.png" />
</div>
</div>
</body>
</html>
