CSS/JS图片鼠标悬浮一道光闪过
看到有些网站logo鼠标悬浮上面的时候，会出现一道光，一闪而过，刚开始以为是gif图，已审查，
居然不是；现在就实现在这种效果：
先看看CSS实现的效果图：
看到没，就是这道刺眼的白光。。。。 啊啊。。我的眼睛。。。。
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#main {
position: relative;
margin: 50px auto;
width: 600px;
height: 400px;
background: url(img/1.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
#main #guang {
display: block;
position: absolute;
width: 300px;
height: 100%;
top: 0;
left: -450px;
overflow: hidden;
transform: skewX(-30deg);
transition: left 1s linear 0s;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .8)50%, rgba(255, 255, 255, 0)100%);
}
#main:hover #guang {
left: 1500px;
}
</style>
<!--<script type="text/javascript">
$(function() {
$("#main").hover(function() {
$("#guang").animate({
left: '1450'
}, 1000);
}, function() {
$("#guang").stop(true, true).css('left', '-450px');
})
})
</script>-->
</head>
<body>
<div id="main">
<div id="guang"></div>
</div>
</body>
</html>
不知各位看官看出里面的问题没，就是鼠标离开的时候，一道光回回退回去，就是这个。。。
现在js实现，打开上面的注释，加hover事件，我们用动画animate实现：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#main {
position: relative;
margin: 50px auto;
width: 600px;
height: 400px;
background: url(img/1.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
#main #guang {
display: block;
position: absolute;
width: 300px;
height: 100%;
top: 0;
left: -450px;
overflow: hidden;
transform: skewX(-30deg);
/*transition: left 1s linear 0s;*/
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, .8)50%, rgba(255, 255, 255, 0)100%);
}
/*#main:hover #guang {
left: 1500px;
}*/
</style>
<script type="text/javascript">
$(function() {
$("#main").hover(function() {
$("#guang").animate({
left: '1450'
}, 1000);
}, function() {
$("#guang").stop(true, true).css('left', '-450px');
})
})
</script>
</head>
<body>
<div id="main">
<div id="guang"></div>
</div>
</body>
</html>
纯CSS实现：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.img {
display: block;
position: relative;
width: 800px;
height: 450px;
margin: 0 auto;
}
.img:before {
content: "";
position: absolute;
width: 200px;
height: 100%;
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)
}
.img:hover:before {
left: 150%;
transition: left 1s ease 0s;
}
</style>
</head>
<body>
<a href="#" class="img"><img src="http://img.loveqiao.com/pic1.jpg" width="800"></a>
</body>
</html>
链接;http://www.loveqiao.com/archives/417
