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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64690.shtml

张贴在3