原文:http://www.nowamagic.net/librarys/veda/detail/2600

资料参考:

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html  CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)

HTML

<p class="overimg">
<a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
<i class="light"></i>
</p>

css

.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -180px;
top: 0;
width: 180px;
height: 90px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg); }
.overimg:hover .light{
left:180px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}

  

大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。

同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针。

打开 F12 调试来看会更加清楚。

【CSS3】使用CSS3线性渐变实现图片闪光划过效果(转)的更多相关文章

  1. 使用CSS3线性渐变实现图片闪光划过效果

    <p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/ima ...

  2. 深入理解css3中的线性渐变

    css3中的线性渐变 线性渐变公式: background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, & ...

  3. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  4. CSS3中颜色线性渐变实战

    css3线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: CSS Code复制内容到剪贴板 .te ...

  5. 纯CSS3实现超立体的3D图片侧翻倾斜效果

    看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...

  6. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  7. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 渐变2 线性渐变实例

    3 线性渐变实例 一.颜色从顶部向底部渐变 制作从顶部到底部直线渐变有三种方法,第一种是起点参数不设置,因为起点参数的默认值为“top”:第二种方法起点参数设置为“top”:第三种起点参数使用“-90 ...

  9. Android获得线性渐变某点的颜色

    安卓官方确实提供了好多非常强大的工具给我们了,例如我们最近经常在shape中加入gradient(渐变),像我的项目中用的是线性渐变, <?xml version="1.0" ...

随机推荐

  1. Ajax 跨域提交表单

    跨域提交表单,前端ajax不用做任何修改, 只需要在后端调用的方法里面添加一行代码即可. .NET 版 HttpContext.Response.AddHeader("Access-Cont ...

  2. sleep()方法和wait()方法之间有什么差异?

    sleep()方法用被用于让程序暂停指定的时间,而wait()方法被调用后,线程不会自动苏醒,需要别的线程调用同一个对象上的notify()或者nofifyAl()方法 主要的区别是,wait()释放 ...

  3. springmvc 之 返回值

    springMVC对于controller处理方法返回值的可选类型 spring mvc 支持如下的返回方式:ModelAndView, Model, ModelMap, Map,View, Stri ...

  4. 在win7下如何设置计划任务每一分钟执行一次

  5. LODOP之票据连续套打笔记<一>

    之前项目中需要使用套打,费了半天劲,最后找到LODOP,整体感觉还是不错,简单,满足大多数web套打 这是我项目中需要打印的票据 该票据每张做多显示6条数据,数据超过6条的时候需要进行分页打印,当时做 ...

  6. laravel blade模板介绍

    第一步:首先写好模板 在sites下新建立一个app.blade.php文件 写入模板如: <!DOCTYPT html><html><head> <titl ...

  7. 普通RAID磁盘数据格式规范

    普通RAID磁盘数据格式规范 1.介绍 在当今的IT环境中,系统管理员希望改变他们正在使用的内部RAID方案,原因可能有以下几个:许多服务器都是附带RAID解决方案的,这些RAID解决方案是通过母板磁 ...

  8. JavaScript学习笔记(散)——继承、构造函数super

    构造函数中的super 今天看<JavaScript设计模式与开发实践>时,在书中看到一段代码出现super语句,第一次看到这个关键字,所以上网查了下它的作用,发现这个关键字是来自java ...

  9. 配置一个完整的 applicacontext.xml

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  10. 安卓巴士android源码、博文精选1

      每周精选 第 53 期   精品源码 Android开源项目--CookMan 厨客APP     简介CookMan,厨客,是一款查询.搜索.分类.收藏菜谱功能的APP.|52数据来源Mob A ...