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

CSS/JS图片鼠标悬浮一道光闪过的更多相关文章

  1. Spring MVC程序中得到静态资源文件css,js,图片

    转载自:http://www.blogjava.net/fiele/archive/2014/08/24/417283.html 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题, ...

  2. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  3. SpringMVC中css,js,图片等静态资源被拦截的解决办法

    一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xm ...

  4. CSS快速入门-鼠标悬浮(hover伪类)

    一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...

  5. Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

    问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...

  6. nginx访问css js 图片等静态资源，报404或无法定向访问到

    配置完nginx,把php的项目放上去后,发现css,js和图片全部访问不到,一直重定向到根目录执行index.php,郁闷的在网上查了半天,原来不同后缀名的文件访问时都要在nginx.conf中声明 ...

  7. 使用JS实现鼠标悬浮切换显示

    实现的是在鼠标悬停在不同链接上,在同一位置切换显示想要显示的内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. nginx 无法加载css/js图片等文件 404 not fund

    刚配置Nginx反向代理,Nginx可能会出现无法加载css.js或者图片等文件,这里需要在配置文件*.conf里面加上如下配置项. location ~ .*\.(js|css|png|jpg)$ ...

  9. html通过css,js实现div悬浮效果总汇，如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

随机推荐

  1. signtool.exe not found

    When check the [sign the Xap File] checkbox, build project failed due to signtool.exe not found. Fol ...

  2. Python随机森林算法的使用

    #coding:utf-8 # from python.Lib.packages.sklearn.tree import DecisionTreeClassifier # from python.Li ...

  3. MCS-51系列特殊功能寄存器（摘录）

    MCS-51系列特殊功能寄存器(80H~FFH) 1． P0 (80H) P0.7 P0.6 P0.5 P0.4 P0.3 P0.2 P0.1 P0.0 2．SP 栈指针(81H) 3．DPTR 数据 ...

  4. 02-JAVA中的基本语法

    第一个动手动脑: 首先用枚举类型定义两个变量,然后判断两个变量是否引用同一对象,在判断枚举类型是否是原始数据类型,再从字符串中转换,最后列出所有的对象. 很明显,这两个变量都是枚举类型,但是这两个变量 ...

  5. eclipse 的操作

    1.windows->Preferences...打开"首选项"对话框,左侧导航树,导航到general->Workspace,右 侧Text file encodin ...

  6. three.js 源码注释（三十九）Light/HemisphereLight.js 半球光、 自然光（天光效果）

    /*** * HemisphereLight类 是在场景中创建半球光,就是天光效果,经常用在室外,将各个位置的物体都照亮,室内的光线大多是方向性的, * 无论是窗口还是灯槽,用平面光很方便,室外用平面 ...

  7. Multi-line NSAttributedString with truncated text

    http://stackoverflow.com/questions/7611816/multi-line-nsattributedstring-with-truncated-text/1017279 ...

  8. horizon 修改local的logging 配置

    再部署完horizon的开发环境后,首先要做的就是修改下logging的输出. 我用的开发软件是pycharm, 所以,为了方便在 console里看到输出.需要在 /home/geiao/repo/ ...

  9. link,unlink,remove, rename函数

    link函数:创建一个指向现有文件的链接的方法是使用 个人理解为cp命令 #include <unistd.h> int link( const char *existingpath, c ...

  10. LLVM 初探<一>

    一.安装LLVM LLVM是一个低级虚拟机,全称为Low Level Virtual Machine.LLVM也是一个新型的编译器框架,相关的介绍Wikipedia. 现在LLVM的版本已经有很多,根 ...