<style type="text/css">
.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -204px;
top: 0;
width: 204px;
height: 250px;
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:204px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
} </style>
<p class="overimg">
<a href="http://www.codetc.com">
<img src="http://www.codetc.com/data/attachment/portal/201503/20/201044djj54krtz614ag6n.jpg">
</a>
<i class="light"></i>
</p>

css3一道闪光的更多相关文章

  1. css特效-一道闪光在图片上划过

    在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的.于是把这个效果再实现一下:大体思想是,设计一个透明层i,s ...

  2. IT连创业系列:创业者逆境下的思维

    距上篇文章,又半个多月过去了,是时候来一发阶段性的总结了. 可能最近比较懒,也可能是想不到写文的主题,故写文已变成越来越艰难的一个任务. 这个系列的大标题,也改了:它从<一个想法>到< ...

  3. Android ListView拉到顶/底部,像橡皮筋一样弹性回弹复位

     <Android ListView拉到顶/底部,像橡皮筋一样弹性回弹复位> Android本身的ListView拉到顶部或者底部会在顶部/底部边缘间隙出现一道"闪光&quo ...

  4. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

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

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

  6. css3划过图片闪光

    css代码 01 .img { display:block; position: relative; width:800px; height:450px; margin:0 auto;} 02 .im ...

  7. jquery css3问卷答题卡翻页动画效果

    这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...

  8. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  9. DOM+CSS3实现小游戏SwingCopters

    前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加 ...

随机推荐

  1. Python2018-列表的相关操作

    列表中存放的数据是可以进行修改的,比如"增"."删"."改" .“查” "增"-----append, extend, ...

  2. HDU 5514

    题意: 给你 N 个数 和 一个 M: 对于 每一个 Ni , 乘以 K 取摸 M 都有一个 集合, 把所有集合合并, 求和 Σ ai ( ai → K * Ni % M ) 思路 : 最开始 直接求 ...

  3. 解决ftp客户端连接验证报错Server sent passive reply with unroutable address. Using server address instead

    最近在linux服务器安装vsftp服务.经过一轮设置,终于可以连接上了,用winSCP连接,刷新目录就提示这个错误. 解决办法: vim /etc/vsftpd.conf  ,编辑配置文件,最后加上 ...

  4. Django makemigrations 不行时

  5. aview安装和使用

    一.安装aalibwget https://sourceforge.net/projects/aa-project/files/latest/download?source=files --no-ch ...

  6. STM32L476应用开发之三:串行通讯实验

    在我们的项目需求中,有两个串口应用需求,一个是与炭氢传感器的通讯,另一个是与显示屏的通讯.鉴于此,我们需要实验串行通讯. 1.硬件设计 串行通讯一个采用RS232接口,另一个直接采用TTL方式.我们在 ...

  7. 使用JUnit进行类的测试(一)

    首先是测试的一些常用标注: @Test:执行测试的方法 @Before & @After : 在 测试的方法 “前” 或者 “后” 被唤醒 -Initialization -Release r ...

  8. python 面向对象编程(高级篇)

    飞机票 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例(即:对 ...

  9. java.lang.NumberFormatException 错误及解决办法

    package com.geelou.test; public class ErrTest { public static void main(String[] args) { String numS ...

  10. flutter No material widget found textfield widgets require a material widget ancestor

    Error states that TextField widgets require a Material widget ancestor. Simply wrapping your whole l ...