黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)

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代码

<a href="#" class="guangshu"><img src="https://static.cnblogs.com/images/adminlogo.gif"></a>

转载于:https://www.cnblogs.com/huangcong/p/6062035.html

黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)相关推荐

黄聪：浓缩的才是精华：浅析GIF格式图片的存储和压缩（转）
http://www.cnblogs.com/qcloud1001/p/6647080.html 成文迪, 在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦. GIF格式 ...
黄聪：php实现上传图片和等比例缩略图压缩图片
上传图片然后按照比例缩略图,指定缩略图的最大高度或者最大宽度. <?php function _UPLOADPIC($upfile, $maxsize, $updir, $newname = ' ...
黄聪：WordPress图片插件：Auto Highslide修改版（转）
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据
首先到phpexcel官网上下载最新的phpexcel类,下周解压缩一个classes文件夹,里面包含了PHPExcel.php和PHPExcel的文件夹,这个类文件和文件夹是我们需要的,把class ...
黄聪：《跟黄聪学WordPress插件开发》
续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...
黄聪：Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(二) Cryptography Application Block (高级) 本章介绍的是企业库加密应用程序模块 ...
黄聪：C# MP3操作类,能播放指定的mp3文件,或播放嵌入的资源中的Mp3文件
以下为我写的Mp3操作类源代码: using System; using System.Collections.Generic; using System.Linq; using System.Tex ...
黄聪：如何使用CodeSmith批量生成代码(转：http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)...
先看看CodeSmith的工作原理: 简单的说:CodeSmith首先会去数据库获取数据库的结构,如各个表的名称,表的字段,表间的关系等等,之后再根据用户自定义好的模板文件,用数据库结构中的关键字替代 ...
黄聪：C#编写的Word操作类,有换页,添加表格,文本功能
最近要帮老师做个工资管理系统,需要自动生成Word. 就上网找了个Word操作类,再做了点修改,下面公布一下自己的代码: using System; using System.Collections. ...
黄聪：如何使用CodeSmith批量生成代码(原创系列教程)
在上一篇我们已经用PowerDesigner创建好了需要的测试数据库,下面就可以开始用它完成批量代码生成的工作啦. 下面我会一步步的解释如何用CodeSmith实现预期的结果的,事先声明一下,在此只做 ...

黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)

黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)相关推荐

最新文章

热门文章