黄聪:css3实现图片划过一束光闪过效果(图片光影掠过效果)
CSS代码
.guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.guangshu:before { content: ""; position: absolute; width:200px; height: 100%; top:; 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代码
<a href="#" class="guangshu"><img src="https://static.cnblogs.com/images/adminlogo.gif"></a>
黄聪:css3实现图片划过一束光闪过效果(图片光影掠过效果)的更多相关文章
- css3实现图片划过一束光闪过效果
该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...
- 黄聪:浓缩的才是精华:浅析GIF格式图片的存储和压缩(转)
http://www.cnblogs.com/qcloud1001/p/6647080.html 成文迪, 在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦. GIF格式 ...
- 黄聪:WordPress图片插件:Auto Highslide修改版(转)
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
- 黄聪:利用ImageMagicK给图片加水印
1 图片水印处理 假设把名为logo.gif的水印图标添加在原始图片(src.jpg)右下角,且水印的下边缘距原始图片10像素.右边缘距原始图片5像素.使用如下命令即可: convert src.jp ...
- 黄聪:《跟黄聪学WordPress插件开发》
续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...
- JQ基础练习---图片划过变暗
简单分享下,划过一张图片其余图片变暗,图片划过变暗的简单效果,JQ实现主要是css写法跟思路变化. <script src="http://ajax.googleapis.com/aj ...
- 黄聪:PHP使用Simple_HTML_DOM遍历、过滤及保留指定属性
<? /* * 参考资料: * http://www.phpddt.com/manual/simplehtmldom_1_5/manual_api.htm * http://www.phpddt ...
- 黄聪:《跟黄聪学WordPress主题开发》
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
- 黄聪:VS2010开发如何在c#中使用Ctrl、Alt、Tab等全局组合快捷键
1.新建一个类 HotkeyHelper using System; using System.Runtime.InteropServices; using System.Windows.Forms ...
随机推荐
- springMvc 报错
org.springframework.core.convert.ConversionFailedException: Failed to convert from type java.util.Ar ...
- 完美解决scrollView 截屏图片模糊
UIGraphicsBeginImageContext 首先说明一下UIGraphicsBeginImageContextWithOptions 和UIGraphicsBeginImageCont ...
- codeforces 732E(贪心)
题目链接:http://codeforces.com/contest/732/problem/E 题意:有n台计算机,m个插座,每台计算机有一个值a[i],每个插座有一个值b[i],每个插座最多只能对 ...
- Linux下memcache的安装
memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.目前用memcache解决互联网上的大用户读取是非常流行的一种用法,在互联网企业中有着广泛的应用.关 ...
- 关于Windows7的安装纠结过程
关于Windows7的安装过程 背景交代 因为自己有两个笔记本,一个是伴我读过四年大学生活的老华硕笔记本,一个是姐夫不用的上网本.自己的构想是将老笔记本装上Ubuntu Server当作平时开发pyt ...
- Mysql修改日期,时间不变的做法
UPDATE tra_bargainorder SET EndParkingTime = ADDTIME (CURDATE() + INTERVAL 0 HOUR,TIME(EndParkingTim ...
- mvn打包时添加version和profile
<!-- 定义profile --> <profiles> <!-- 开发环境 --> <profile> <id>dev</id&g ...
- OpenStack虚拟机DHCP获取不到IP地址排查
版本:OpenStack Liberty Neutron DVR 现象: 1.在虚拟机内部不停地dhclient 2.在虚拟机所属的计算节点的物理网卡上抓包,发现该虚拟机发出的dhcp广播包 3.在虚 ...
- js活动倒计时
html代码: <div "></div> <div "></div> <div "></div> ...
- sublime上安装c/c++代码分析工具 sublime Linter - cppcheck
项目官方说明 sublime Linter - cppcheck 理解下sublime Linter - cppcheck, 它是插件的插件,sublime的插件sublimeLinter的插件.网络 ...