看到有些网站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. 如何在十分钟内插入1亿条记录到Oracle数据库？

    这里提供一种方法,使用 APPEND 提示,使得十分钟内插入上亿数据成为可能. -- Create table create table TMP_TEST_CHAS_LEE ( f01 VARCHAR ...

  2. iOS 设置 文字和 图片的位置

    1.我最开始实现这个采用的方法:重新自定义一个view,然后有两个属性label和imageView,然后设置位置布局,再添加单击手势,用代理回传点击方法. 2.第二种方法:自定义一个Button继承 ...

  3. Spring MVC Web框架

      1. Spring MVC简介 Spring MVC是java EE平台请求驱动类型的轻量级Web框架,使用了MVC设计模式的思想,spring框架的主要优势之一就是分层架构,分层架构允许选择使用 ...

  4. java基础之：堆排序

    最近做题目饱受打击,愈发觉得打好基础的重要性,于是乎,决心把基本的排序算法还有数组操作一一实现,目的在于一方面能够得到对JAVA基础的巩固,另一面在实现的过程中发现不足. 今天所实现的堆排序(最大堆) ...

  5. R--相关分布函数、统计函数的使用

    分布函数家族: *func()r : 随机分布函数d : 概率密度函数p : 累积分布函数q : 分位数函数 func()表示具体的名称如下表: 例子 #r : 随机分布函数 #d : 概率密度函数 ...

  6. Andorid开发学习---ubuntu 12.04下搭建超好用的安卓模拟器genymotion 安装卸载virtualbox 4.3

    什么是Genymotion? Genymotion是一套完整的工具,它提供了Android虚拟环境.它简直就是开发者.测试人员.推销者甚至是游戏玩家的福音. Genymotion支持Windows.L ...

  7. Sphinx中文分词详细安装配置及API调用实战

    这几天项目中需要重新做一个关于商品的全文搜索功能,于是想到了用Sphinx,因为需要中文分词,所以选择了Sphinx for chinese,当然你也可以选择coreseek,建议这两个中选择一个,暂 ...

  8. Odoo10尝鲜：制造

    Odoo10主要是对 MRP 进行重构, 增加制造领料类型 简化工作中心 指定投料的作业 工作中心的生产效率指标,例如 OEE 基于历史工单数据,统计.计算工序作业时长     并增加了新功能,例如 ...

  9. C#字段中加入list<类字段> 的两种写法

    类1 public class NumCon { public string zsNum { get; set; } } 类2 public class RepeatMess //重复数据响应 { p ...

  10. iframe空文档中写入内容

    往一个空的iframe中写入内容,再其document ready之前有可能遇到拿回 的body指针为空,因此以下面的函数往其document中写入html HRESULT WriteToHtmlDo ...