CSS3实例-滤镜
2017-04-03 本文已影响26人
陈小窝
- GIF示例图
合作伙伴.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="bgk">
<title>合作伙伴的色调变化</title>
<style media="screen">
*{padding: 0;margin: 0;}
.hb-box{overflow: hidden;width: 100%;}
.hb-box .hb-pic{float: left;width: 20%;margin-bottom: 10px;padding: 10px;box-sizing: border-box;}
.hb-box .hb-pic>img{max-width: 100%;vertical-align: middle;transition: .36s;-webkit-filter: grayscale(1);}
.hb-box .hb-pic:hover img {-webkit-filter: grayscale(0);}
</style>
</head>
<body>
<div class="hb-box">
<div class="hb-pic">
</div>
<div class="hb-pic">
</div>
</div>
</body>
</html>
图片资源：
tudou.jpg
changyou.jpg
