看到有些网站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. Python全栈之路---运算符与基本的数据结构

    运算符 一.算术运算符: 练习: + 加法 两个对象相加 1 + 2得到3:'a' + 'b'得到'ab'. - 减法 一个数减去另一个数或者是负数 5 - 3得到2:-2得到一个负数 * 乘法 两个 ...

  2. 解决KDE桌面环境下Eclipse崩溃的问题--让Eclipse使用特定的GTK2主题运行

    最近在Kubuntu14.04上安装Eclipse,由于Ubuntu软件中心中的版本太老(3.8),而且会自动安装OpenJDK,于是到官网下载最新的4.4版.(Luna,代号很有亲切感有木有,女神万 ...

  3. CSS3动画与2D、3D转换

    一.过度动画:transition 五个属性: transition-property css 样式属性名称 transition-duration 动画持续时间(需要单位s) transition- ...

  4. Java核心知识点学习----多线程 倒计时记数器CountDownLatch和数据交换的Exchanger

    本文将要介绍的内容都是Java5中的新特性,一个是倒计时记数器---CountDownLatch,另一个是用于线程间数据交换的Exchanger. 一.CountDownLatch 1.什么是Coun ...

  5. Android编译环境搭建（0818-0819）

    1 在虚拟机VMware上安装64位Ubuntu14.04LTS 首先需要安装虚拟机并激活.然后新建虚拟机,选择使用下载好的Ubuntu镜像.注意需要将光驱改为自己下载的,而不是autoinst.is ...

  6. Visual studio 非常好的插件

    1. Productive power tools2015 2. Visual studio spell checker

  7. 【洛谷P1941】飞扬的小鸟

    f [ i ] [ j ] 表示横坐标为 i ,高度为 j 时的最小点击次数 分别dp处理: 1.上升,(1)<m (2)>=m 2.下降 3.管道 #include<cstdio& ...

  8. Java截图笔记

  9. java中两个值互换

    两个值互换有以下三种方式: 使用临时变量(此种方法便于理解) x = 10; y = 20; //begin int temp = x; x = y; y = temp; //end; //此时x = ...

  10. LLVM 初探<一>

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