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. iOS实现地图半翻页效果--老代码备用参考

    // Curl the image up or down CATransition *animation = [CATransition animation]; [animation setDurat ...

  2. poj 3373 Changing Digits (DFS + 记忆化剪枝+鸽巢原理思想)

    http://poj.org/problem?id=3373 Changing Digits Time Limit: 3000MS   Memory Limit: 65536K Total Submi ...

  3. mysql的错误：The server quit without updating PID file /usr/local/mysql/data/door.pid).

    mysql错误解决: 先 参考:http://www.jb51.net/article/48625.htm 参考第四条: mysql在启动时没有指定配置文件时会使用/etc/my.cnf配置文件,请打 ...

  4. H5动画优化之路

    H5动画60fps之路 在移动端,和Native相比,H5一直都被人吐槽性能差,尤其是在动画方面. 谈到整个Web app的生命周期,一般分为四个部分: 加载 等待用户 响应用户 动画 一般情况下,首 ...

  5. Oracle数据库的下载和安装

    那天分享一下Oracle的下载和安装的过程,有需要的朋友可以借鉴参考一下.如有雷同不胜感激! 首先可以到Oracle的官网下载Oracle的最次年版本的Oracle数据库.一下是个人下载的数据库版本百 ...

  6. 李洪强漫谈iOS开发[C语言-016]-变量的作用域

  7. delphi中formatFloat代码初探（在qt下实现floatformat的函数）

    由于项目需要,需要在qt下实现floatformat的函数.之前写过一个,但是写得不好.决定重新写一个,参考delphi xe2下的实现.把xe2下的相关代码都看了一遍,xe2的代码思路在这里贴出来. ...

  8. 产品不应该大而全，而是应该小而精（DropBox有感，产品要1分钟学会）

    昨天试用了一下DROPBOX的个人版,对它的功能与界面简单深感震惊. 后来与一位业内朋友交流了一下,他说: 产品一般都是通过一个点来做.把一个点做到最好有可能会成为平台.另外还要在合适的时间做合适的事 ...

  9. DesignPatterns

    1.设计模式,说明工厂模式.  总共23种,分为三大类:创建型,结构型,行为型 创建型 1. Factory Method(工厂方法) 2. Abstract Factory(抽象工厂) 3. Bui ...

  10. phpstrom 与 xdebug 配合实现PHP单步调试

    不说废话,直接开始. 第一步: 安装并配置xdebug 安装 可以从官网直接下载对应php版本的xdebug,下载地址:  https://xdebug.org/download.php 配置,典型的 ...