css3的线性渐变效果

1.代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3的线性渐变效果</title>
    <style>
    .overimg{
    position: relative;
    display: block;
    /* overflow: hidden; */
    box-shadow: 0 0 10px #fff;
}
.light{
    cursor:pointer;
    position: absolute;
    left: -180px;
    top: 0;
    width: 180px;  /**  产生渐变的宽度的范围 **/
    height: 90px;  /**  产生渐变的高度的范围 **/

    background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
 
}
.overimg:hover .light{
    left:180px;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    transition:0.5s;
}


    </style>
</head>
<body>

    <p class="overimg">
    <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
    <i class="light"></i>
   </p>


   <p class="overimg">
    <a><img src="http://www.52ij.com/uploads/allimg/160317/1110104P8-4.jpg" width="180" height="90"></a>
    <i class="light"></i>
   </p>

</body>
</html>

2.效果截图：

posted @ 2016-04-08 10:48 侠岚之弋痕夕阅读(198) 评论(0) 收藏举报

刷新页面返回顶部

侠岚之弋痕夕

css3的线性渐变效果

公告