Tetegw
4/8/2018 - 3:16 AM

扫光效果

css3 扫光效果

扫光效果
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      .box{
         width: 330px;
         height: 475px;
         border: 1px solid #000;
         margin: 100px auto;
         position: relative;
      }
      .box:after{
         content: '';
         width: 80px;
         height: 150%;
         position: absolute;
         left: -200px;
         top: 0;
         background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));
         transform:skew(-20deg);
      }
      .box:hover:after{
         /* 当把过渡添加在hover里面的时候，只会在mouseover的时候执行，离开的时候不会执行 */
         transition:left 1s;
         left:600px;
      }
   </style>
</head>
<body>
   <div class="box">
      <img src="image/jd.jpg" height="475" width="330" alt="">
   </div>
</body>
</html>