关于CSS3的一些用法，持续更新。。

1. css3实现图片划过一束光闪过效果
2. 

   <a href="#" class="img"><img src="" width="800"></a>

   View Code

   css代码：

   

   .img { 
       display:block;
       position: relative;
       width:800px;
       height:450px;
       margin:0 auto;
   }
   .img:before {
      content: ""; 
      position: absolute; 
      width:200px; 
      height: 100%;
      top: 0;
      left: -150px;
      overflow: hidden;
      background: -moz-linear-gradient(left, rgba(255,255,255,0)0,        rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
     background: -webkit-gradient(linear, left top, right top, color- stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
      background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
      background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
      -webkit-transform: skewX(-25deg);
      -moz-transform: skewX(-25deg)
   }
   .img:hover:before {
       left: 150%;
       transition: left 1s ease 0s; 
   }

   View Code

    

关于CSS3的一些用法，持续更新。。

原文：http://www.cnblogs.com/paul-du/p/6282284.html