CSS3实例-滤镜

作者: 陈小窝 | 来源:发表于2017-04-03 23:10 被阅读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">
          ![](img/changyou.jpg)
        </div>
        <div class="hb-pic">
          ![](img/tudou.jpg)
        </div>
      </div>
  </body>
</html>

图片资源：