<p class="overimg">
<a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
<i class="light"></i>
</p>
.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -180px;
top:;
width: 180px;
height: 90px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg); }
.overimg:hover .light{
left:180px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}

大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。

使用CSS3线性渐变实现图片闪光划过效果的更多相关文章

  1. 【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)

    原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/201 ...

  2. css3背景渐变以及图片混合渲染模式(一)

    一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(g ...

  3. CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

    一.线性渐变在 Mozilla 下的应用     语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, ...

  4. CSS3线性渐变linear-gradient

    转自 http://www.w3cplus.com/content/css3-gradient CSS3的线性渐变 一.线性渐变在Mozilla下的应用 -moz-linear-gradient( [ ...

  5. CSS3 线性渐变linear-gradient

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).为了更好的应用 CSS3 Gradient,需要先了解一下目前的几种现代浏 ...

  6. CSS3 线性渐变(linear-gradient)

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

  7. css3 线性渐变和径向渐变

    线性渐变:ie6以下不兼容 径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta ...

  8. CSS3线性渐变和径向渐变

    background:linear-gradient(to top left, blue,orange);//从右下角往左上角渐变 background:radial-gradient(to top ...

  9. CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)

    摘自: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

随机推荐

  1. 使用PHP的正则抓取页面中的网址

    最近有一个任务,从页面中抓取页面中所有的链接,当然使用PHP正则表达式是最方便的办法.要写出正则表达式,就要先总结出模式,那么页面中的链接会有几种形式呢?   链接也就是超级链接,是从一个元素(文字. ...

  2. 插件开发-UI插件开发

    1.新建类库解决方案,引入命名空间,同时引入要添加UI Form的WebPart(在Portal\UILib目录下) 2.继续UFSoft.UBF.UI.Custom.ExtendedPartBase ...

  3. Git命令行(转用于学习和记录)

    Git命令行介绍和使用说明(持续更新) 参见:<Git 中文简体教程> 一. 命令“git”或者“git help”查询常用命令 [add]: “git add”——不但是用来添加不在版本 ...

  4. 单例模式getInstance()

    /** * 对象的实例化方法,也是比较多的,最常用的方法是直接使用new,而这是最普通的,如果要考虑到其它的需要,如单实例模式,层次间调用等等. * 直接使用new就不可以实现好的设计好,这时候需要使 ...

  5. jQuery index()

    index() index() 方法返回指定元素相对于其他指定元素的 index 位置. 语法 $(selector1).index(selector2) selector2:可选,指定元素:为空时默 ...

  6. web开发必备插件

    文本编辑器百度ueditor:http://ueditor.baidu.com/website/

  7. 参考__CSS参考

    库 CsshakeAnimate.css

  8. 关于HTML5你必须知道的28个新特性,新技巧以及新技术

    1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcapt ...

  9. ireport5.6+jasperreport6.3开发(二)--web开发的配置

    ireport5.6只能编译出*.jasper的报表包,最终报表需要被输出为一个doc html pdf excel等文件,这时就需要jasperreport6.5的库进行配合了. jasperrep ...

  10. css学习记录

    1 !important 表示此属性需要优先考虑: <head>    <title>Page Title</title>    <style type=&q ...