CSS实现高亮光弧效果

使用CSS3实现的一个高亮光弧效果，当鼠标hover到某一个元素上时，一道光弧从左向右闪过，效果如下：

代码如下：

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > light   title  > 
       style  >  
        body  {  
            margin  :   0  ; 
         }  
        a.floor  {  
            display  :   block  ;  
            height  :   475px  ; 
         }  
        a.floor:hover:before  {  
            -webkit-transition  :   left 1.5s  ;  
            -moz-transition  :   left 1.5s  ;  
            transition  :   left 1.5s  ;  
            left  :   920px  ; 
         }  
        a.floor:before  {  
            content  :   ""  ;  
            position  :   absolute  ;  
            width  :   80px  ;  
            height  :   475px  ;  
            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)  ; 
         } 
       style  > 
   head  > 
   body  > 
   a   class  ="floor"   href  ="javascript:;"  > 
       img   src  ="./images/girl.jpg"   height  ="475"   width  ="760"   alt  =""  > 
   a  > 
   body  > 
   html  >  

查看更多关于CSS实现高亮光弧效果的详细内容...