css代码

01 .img { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
02 .img:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left:-150px; overflow: hidden;
03 background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
04 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)));
05 background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
06 background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
07 -webkit-transform: skewX(-25deg);
08 -moz-transform: skewX(-25deg)
09 }
10 .img:hover:before { left: 150%; transition: left 1s ease 0s; }

html代码

01 <a href="#" class="img"><img src="http://img.loveqiao.com/pic1.jpg" width="800"></a>
 

css3划过图片闪光的更多相关文章

  1. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  5. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  6. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  7. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  8. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  9. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

随机推荐

  1. 关于如何学好游戏3D引擎编程的一些经验[转]

    此篇文章献给那些为了游戏编程不怕困难的热血青年,它的神秘要我永远不间断的去挑战自我,超越自我,这样才能攀登到游戏技术的最高峰 ——阿哲VS自己 QQ79134054多希望大家一起交流与沟通 这篇文章是 ...

  2. 一个简单的php分页类代码(转载)

    入门级php分页类 原文地址:http://www.xfcodes.com/php/fenye/3608.htm 时间:2015-12-16 20:52:00来源:网络 php分页类. 复制代码代码如 ...

  3. EWS小记

    前段时间和同事完成了一个Exchange 2010 OWA的改造版,他狠狠的把网易邮箱抄了一把,而我则狠狠的被EWS坑了一把.今天打开项目粗略看了一下,发现很多东西都有点记不起来了,思细极恐,决定还是 ...

  4. C#压缩、解压缩文件（夹）（rar、zip）

    主要是使用Rar.exe压缩解压文件(夹)(*.rar),另外还有使用SevenZipSharp.dll.zLib1.dll.7z.dll压缩解压文件(夹)(*.zip).需要注意的几点如下: 1.注 ...

  5. Oracle中的触发器

    创建触发器的语法: Create trigger 触发器的名字 after insert/update/delete/(select是没有触发器的) on 表名字 declare begin dbms ...

  6. oracle数据库的建表，删除字段，添加字段，修改字段，修改字段......

    1. 使用oracle创建一张表: SQL> create table loginuser( id ,), username ), password ), email ), descriable ...

  7. conky 配置变量表

    转自conky 配置变量表 项目主页:http://conky.sourceforge.net/ 文档说明:http://conky.sourceforge.net/docs.html Variabl ...

  8. IOS 接ShareSDK问题

    如果报错AGCommon 等错误 引用libicucore.A.dylib ShareSDK 官网 管理中心 → 创建一个新的应用 获得key之后  啥都别做.! - (BOOL)applicatio ...

  9. SQL分组查询GroupBy

    一.分组查询1.使用group by进行分组查询在使用group by关键字时,在select列表中可以指定的项目是有限制的,select语句中仅许以下几项:〉被分组的列〉为每个分组返回一个值得表达式 ...

  10. 1088-Gnome Sequencing

    描述 In the book All Creatures of Mythology, gnomes are kind, bearded creatures, while goblins tend to ...