<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. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  2. Winform MDI窗体容器 权限 简单通讯

    MDI窗体容器 权限  using System; using System.Collections.Generic; using System.ComponentModel; using Syste ...

  3. DuiLib 源码分析之解析xml类CMarkup & CMarkupNode 头文件

    xml使用的还是比较多的,duilib界面也是通过xml配置实现的 duilib提供了CMarkkup和CMarkupNode类解析xml,使用起来也是比较方便的,比较好奇它是怎么实现的,如果自己来写 ...

  4. npm相关

    npm list -g --depth 0 : -g 列出所有全局模块,--depth 使列表只列出简略信息,如包名.版本号

  5. android:layout_weight的真实含义(转)

    首先声明只有在Linearlayout中,该属性才有效.之所以Android:layout_weight会引起争议,是因为在设置该属性的同时,设置android:layout_width为wrap_c ...

  6. 基础笔记3(二)(专门处理String的正则表达式)

    1.常规判断一个字符串是以什么开头,是否是数字的判断方式有: a.通过比较每个字符,注意比较是字符值(ASc码值),不是字面值 String s="); //判断每个字符数组的每个字符 ch ...

  7. css3——新盒子定义box-sizing

    css3对盒子有了新定义,以前的 盒子实际宽(高) = padding + width(height) + ( border * 2); 使用了box-sizing之后盒子实际宽(高) 就等于 wid ...

  8. 对 OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks 一文的理解

    一点最重要的学习方法:  当你读一篇论文读不懂时,如果又读了两遍还是懵懵懂懂时怎么办???方法就是别自己死磕了,去百度一下,如果是很好的论文,大多数肯定已经有人读过并作为笔记了的,比如我现在就把我读过 ...

  9. 导出excel用ajax不行,提交form表单可以

    导出excel用ajax不行,提交form表单可以. 一直用ajax找原因,网页不出现下载提示框 写了 response.setContentType("application/binary ...

  10. Android N做了啥

    Android N做了哪些改变 一.    性能改善 Doze超级省电模式 手机在关屏同时没有充电的情况,在一段时间后会进入打盹状态,第一阶段会停掉同步.作业.网络等访问,第二阶段会停掉app的位置服 ...