看到有些网站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 src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--<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 src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<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>
几天不写代码，有点生疏，各位看官，国庆玩的如何。。。。。。
时间： 2024-08-05 19:32:14