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实现图片划过一束光闪过效果(图片光影掠过效果)的更多相关文章

  1. css3实现图片划过一束光闪过效果

    该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...

  2. 黄聪:浓缩的才是精华:浅析GIF格式图片的存储和压缩(转)

    http://www.cnblogs.com/qcloud1001/p/6647080.html 成文迪, 在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦. GIF格式 ...

  3. 黄聪:WordPress图片插件:Auto Highslide修改版(转)

    一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...

  4. 黄聪:利用ImageMagicK给图片加水印

    1 图片水印处理 假设把名为logo.gif的水印图标添加在原始图片(src.jpg)右下角,且水印的下边缘距原始图片10像素.右边缘距原始图片5像素.使用如下命令即可: convert src.jp ...

  5. 黄聪:《跟黄聪学WordPress插件开发》

    续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...

  6. JQ基础练习---图片划过变暗

    简单分享下,划过一张图片其余图片变暗,图片划过变暗的简单效果,JQ实现主要是css写法跟思路变化. <script src="http://ajax.googleapis.com/aj ...

  7. 黄聪:PHP使用Simple_HTML_DOM遍历、过滤及保留指定属性

    <? /* * 参考资料: * http://www.phpddt.com/manual/simplehtmldom_1_5/manual_api.htm * http://www.phpddt ...

  8. 黄聪:《跟黄聪学WordPress主题开发》

    又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...

  9. 黄聪:VS2010开发如何在c#中使用Ctrl、Alt、Tab等全局组合快捷键

    1.新建一个类 HotkeyHelper  using System; using System.Runtime.InteropServices; using System.Windows.Forms ...

随机推荐

  1. springMvc 报错

    org.springframework.core.convert.ConversionFailedException: Failed to convert from type java.util.Ar ...

  2. 完美解决scrollView 截屏图片模糊

    UIGraphicsBeginImageContext   首先说明一下UIGraphicsBeginImageContextWithOptions 和UIGraphicsBeginImageCont ...

  3. codeforces 732E(贪心)

    题目链接:http://codeforces.com/contest/732/problem/E 题意:有n台计算机,m个插座,每台计算机有一个值a[i],每个插座有一个值b[i],每个插座最多只能对 ...

  4. Linux下memcache的安装

    memcache是高性能,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度.目前用memcache解决互联网上的大用户读取是非常流行的一种用法,在互联网企业中有着广泛的应用.‍关 ...

  5. 关于Windows7的安装纠结过程

    关于Windows7的安装过程 背景交代 因为自己有两个笔记本,一个是伴我读过四年大学生活的老华硕笔记本,一个是姐夫不用的上网本.自己的构想是将老笔记本装上Ubuntu Server当作平时开发pyt ...

  6. Mysql修改日期,时间不变的做法

    UPDATE tra_bargainorder SET EndParkingTime = ADDTIME (CURDATE() + INTERVAL 0 HOUR,TIME(EndParkingTim ...

  7. mvn打包时添加version和profile

    <!-- 定义profile --> <profiles> <!-- 开发环境 --> <profile> <id>dev</id&g ...

  8. OpenStack虚拟机DHCP获取不到IP地址排查

    版本:OpenStack Liberty Neutron DVR 现象: 1.在虚拟机内部不停地dhclient 2.在虚拟机所属的计算节点的物理网卡上抓包,发现该虚拟机发出的dhcp广播包 3.在虚 ...

  9. js活动倒计时

    html代码: <div "></div> <div "></div> <div "></div> ...

  10. sublime上安装c/c++代码分析工具 sublime Linter - cppcheck

    项目官方说明 sublime Linter - cppcheck 理解下sublime Linter - cppcheck, 它是插件的插件,sublime的插件sublimeLinter的插件.网络 ...