鼠标悬浮图片一道光闪过
看到有些网站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>
几天不写代码，有点生疏，各位看官，国庆玩的如何。。。。。。
纯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
