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

最新推荐文章于 2020-11-30 16:22:43 发布

原创最新推荐文章于 2020-11-30 16:22:43 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML、CSS实现的鼠标悬停图片闪光特效。通过设置图片上覆盖一层渐变透明度的元素，并在鼠标悬停时平滑过渡实现闪光效果。此效果适用于网站交互设计中增加视觉趣味。

鼠标经过图片有闪光的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;
}