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. 《暗黑世界》安卓APK 编译流程详细说明教程！（图文）

    原地址:http://bbs.gameres.com/forum.php?mod=viewthread&tid=223671 关于开发环境的搭建,之前的相关文档已经很详细的说明,对环境的搭建请 ...

  2. Design Tutorial: Make It Nondeterministic

    Codeforces Round #270:C;http://codeforces.com/contest/472 题意:水题 题解:贪心即可. #include<iostream> #i ...

  3. 1090-Rock, Paper, Scissors

    描述 Rock, Paper, Scissors is a classic hand game for two people. Each participant holds out either a ...

  4. POJ 2492 A Bug's Life（并查集）

    http://poj.org/problem?id=2492 题意 :就是给你n条虫子,m对关系,每一对关系的双方都是异性的,让你找出有没有是同性恋的. 思路 :这个题跟POJ1703其实差不多,也是 ...

  5. Windows server 2008下开启telnet功能

    今天在windows server 2008 R2下使用telnet 来测试端口是否可以连接,结果发现如下错误:

  6. ASP.NET MVC 入门2、项目的目录结构与核心的DLL

    我们新建一个ASP.NET MVC的Web Application后,默认的情况下,项目的目录结构如下: App_Data :这个目录跟我们一般的ASP.NET website是一样的,用于存放数据. ...

  7. C内存管理

    一般而言,分配给进程的内存有四个概念上不同的区域,分别为:代码段.数据段.堆和栈,其中数据段又可以细分为初始化为非零的数据和初始化为零的数据.如下图所示: 1.栈区(stack)— 由编译器自动分配释 ...

  8. 【图片处理】cocos2dx png图片压缩处理

    一.介绍 美术用photoshop出图有时候会包含一些无用的信息,这时候image magick可以把这些信息裁掉. 二.使用方法 1.下载并安装Image Magick 2.将脚本里的目录名改成Im ...

  9. 【POJ】1054 The Troublesome Frog

    题目是非常经典的搜索+剪枝.题意简言之就是,青蛙需要沿着直线踩着踏点通过田地,并且踏点需要至少为3.问哪条路径青蛙踩坏的作物最多.很好的一个条件是青蛙每次移动都是等间距的.题目需要注意将其排序. #i ...

  10. Com和DCOM

    COM,DCOM原理及应用 1.DCOM COM的进程透明特性表现在组件对象和客户程序即可以拥有各自的进程空间,也可以共享同一个进程空间,COM负责把客户的调用正确传到组件对象中,并保证参数传递的正确 ...