鼠标悬浮图片一道光闪过

最新推荐文章于 2020-06-13 13:43:37 发布

weixin_33704591

最新推荐文章于 2020-06-13 13:43:37 发布

阅读量241

点赞数

文章标签： javascript ViewUI

看到有些网站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>