看到有些网站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. how spring resolves a request

    quoted from answer at http://stackoverflow.com/questions/14015642/how-does-the-dispatcherservlet-res ...

  2. 用jsch.jar实现SFTP上传下载删除

    java类: 需要引用的jar: jsch-0.1.53.jar 关于jsch有篇文章关于目录的问题写得非常好:http://www.zzzyk.com/show/9f02969327434a6c.h ...

  3. R6010 - abort() has been called 错误

    今天修改了下程序,发布到服务器上进行测试,结果在测试的时候弹出下面的一个框: 找了N久,发现了原因,差点呗自己弄哭了.. 程序里写了下面这句代码,没有注释掉.

  4. linux Bash

    本文包含的命令:type.echo.evn.set.locale.read.declare / typeset.ulimit.alias.unalias.history.!.source.stty.c ...

  5. [刘阳Java]_Java技术有哪些学习重点_第1讲

    纵观网上有很多非常好的对Java技术的总结,这里我个人谈谈对Java技术学习有哪些重点内容[浮浅之见] Java环境搭建 Java基础语法 Java面向对象编程 Java异常 Java IO流 Jav ...

  6. 【实(dou)力(bi)首(mai)发(meng)】第四次CCF软件能力认证题解

    这次的题总体上相对前三次偏简单.由于实力有限,就分析前四题.     试题编号:    201503-1 试题名称:    图像旋转 时间限制:    5.0s 内存限制:    256.0MB 问题 ...

  7. linux 下两台电脑之间ssh无密码连接

    例子:在192.168.0.12使用tecmint用户,连接192.168.0.11主机上的sheena用户 Step 1: Create Authentication SSH-Kegen Keys ...

  8. [C#-SQLite] SQLite一些奇怪的问题

    今天整C#的DAO层,我用的2013, 用的4.0的.NetFramework刚刚创建完Helper就出现异常 +        Connection    "helper.Connecti ...

  9. Odoo启动过程

    [本文基于odoo9源码编写] odoo包含的服务有 db object report workflow web[wsgi] Odoo以wsgi 规范提供Web及Web服务db/object/repo ...

  10. pycharm Cannot find declaration to goto----解决方案

    系统中已经有了该类库,还是找不到类提示 close the project in intellij. close intellij. go to the project folder and dele ...