css3实现图片划过一束光闪过效果(图片光影掠过效果)
本文共 947 字，大约阅读时间需要 3 分钟。
CSS代码
.guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;}.guangshu: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)}.guangshu:hover:before { left: 150%; transition: left 1s ease 0s; }
HTML代码
本文转自黄聪博客园博客，原文链接：http://www.cnblogs.com/huangcong/p/6062035.html，如需转载请自行联系原作者
你可能感兴趣的文章
hdu 2191 (多重背包+二进制优化)
查看>>
网络 基础 5
查看>>
再论一下in,exists,join
查看>>
Redis--初接触
查看>>
ethereum/EIPs-158 State clearing 被EIP-161取代
查看>>
np.mgrid的用法
查看>>
html 富文本编辑器相关--中文状态下输入@的问题
查看>>
在这里给大家安利一个好的免费的虚拟主机云服务器使用地址
查看>>
Linux下使用wc统计文件行数
查看>>
java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决
查看>>
【GO】golang 方法的值调用和指针调用
查看>>
Devexpress ChartControl 柱状图简单例子
查看>>
n元线性方程非负整数解的个数问题
查看>>
技术题目收集整理
查看>>
想象力比知识更重要么？提出问题比解决问题更重要？
查看>>
iOS边练边学--父子控制器之自定义控制器的切换
查看>>
八个防止浪费时间的小窍门
查看>>
^ 转义字符
查看>>
java面向对象入门之带参方法创建
查看>>
Eclipse反编译插件jad的安装
查看>>