<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. view animation

    动画分为 帧动画    drawable animation 补间动画 view animation 属性动画  property animation 作用效果: 加载信息时loading动画 act ...

  2. [Python]简易terminal歌词滚动播放器

    整合了网易云的一些API,想写一个terminal版的音乐播放器,但是还没有想好写成什么样子. 暂时写了一个必须又的功能:带歌词滚动的播放器,用了pygame里的mixer来播放音乐. 准备有时间的时 ...

  3. destoon系统中get_maincat的用法及解释

    get_maincat函数的用法, 如get_maincat(0, $mid, 1),其中第一.二.三个参数分别表示什么? 第一个参数代表parentid 第二个参数代表所有的分类 第三个参数 代表 ...

  4. sort排序

    /*问题 L: 使用sort排序题目描述标准库的sort函数给我们提供了一个很方便的排序的方法,光听别人说方便不顶事,得自己亲自实践一下才能体会到它的方便之处. 输入每组包含多组数据,每组数据第一行包 ...

  5. 利用反卷积神经网络可视化CNN

    http://blog.csdn.net/hjimce/article/details/51762046 http://arxiv.org/pdf/1311.2901.pdf Visualizing ...

  6. React组件库

    图表组件库:Recharts(React和D3构建的图表库) UI组件库:react-bootstrap

  7. Log4j源代码学习

    了解log4j的源代码来源于项目中一次需求,我们想将系统所有的warn日志统一收集到common-warn.log的日志中去,以便于系统对其进行监控处理.于是模拟自动生成的error配置完成了warn ...

  8. hdu4087ALetter to Programmers(三维旋转矩阵)

    参考 三维旋转矩阵 + 矩阵加速 这个还要用到仿射变换. 平移 translate tx ty tz 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 缩放 scale kx ky ...

  9. php操作redis简单例子

    <?php //在PHP里操作Redis //Redis就是php的一个功能类 //创建Redis对象 $redis = new Redis(); //链接redis服务器 $redis -&g ...

  10. Linux json解析jq

    jq是一个linux下很方便的json解析器,平时看json文件都是一行混在一起的,非常不适合阅读. https://stedolan.github.io/jq/download/ 直接到官网上下载, ...