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

    // 这里是导入的包 import React, { Component } from 'react'; // 导入需要用到的组件 import { AppRegistry, Text, View } ...

  2. mac安装Mysql官方示例数据库employee

    1. 下载地址 https://launchpad.net/test-db/employees-db-1/1.0.6 2. 执行命令 /usr/local/mysql/bin/mysql -t -u ...

  3. C++新特性（类）（转载）

    C++新特性(类)里面讲的很清楚,转给大家分享一下 类机制: 类是对某一类对象的抽象:对象是某一类的实例: 类是一种复杂的数据类型,将不同类型的数据和这些数据相关的操作封装在一起的集合体: 通过一道程 ...

  4. web.py+mysql插入中文提示query = query.encode(charset) UnicodeEncodeError: 'latin-1' codec can't encode characters in position 86-100

    对于中文编码的问题,总会出现各种各样恶心的错误,还不知道应该怎么解决,首先,你从最开头就应该关注编码问题,尽量保证所有的编码方式都是一致的 用python+web.py+mysql来写程序,首先要保证 ...

  5. 1.Java内存区域

    Java虚拟机在执行java程序的过程中会把他管理的内存划分为若干个不同的数据区域各自用途.创建以及销毁时间各不相同.有的随着虚拟机进行的启动而存在,有的区域依赖于线程的启动和结束而建立以及销毁.如图 ...

  6. 技术英文单词贴--V

    V validate 验证,确认,使生效 verify 核实,查实,验证 version 版本,译文 via 通过,凭借,经过 prep

  7. RRDTool 三个命令的使用

    要了解rrdtool如何使用就要先从rrd的数据存储方式开始,rrdtool就是为了操作这个数据库的工具,抄来下面一段文字解释. 0x01 什么是rrd数据库 所谓的“Round Robin” 其实是 ...

  8. Delphi inline编译器优化问题

    function Test():Integer; inline; var P:Pointer; begin FreeMem(P); Result := AtomicIncrement(__gr); / ...

  9. Caffe（卷积神经网络框架）介绍

    Caffe(卷积神经网络框架)Caffe,全称Convolution Architecture For Feature Extraction caffe是一个清晰,可读性高,快速的深度学习框架.作者是 ...

  10. Spring学习笔记 Part.01

    Hibernate的作用: 1.可以解决以面向对象的方式操作数据库的问题 请求参数(String)→Strut2→Action(对象)→业务逻辑组件(面向对象) 2.所以任何一个ORM框架都可以代替H ...