鼠标经过图片有闪光的JS特效

最新推荐文章于 2022-09-22 08:54:29 发布

iteye_3821

最新推荐文章于 2022-09-22 08:54:29 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/iteye_3821/article/details/82651573

版权

鼠标经过图片有闪光的JS特效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="pho.css">
</head>
<body>
<p class="overimg">
    <a><img src="2014_02_15_01.jpg"></a>
    <i class="light"></i>
</p>
</body>
</html>

CSS

.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;
}