css3实现图片划过一束光闪过效果

转载 2016年08月30日 16:38:36
.img { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.img: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)
}

.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感应鼠标背景闪烁和图片缩放效果

CSS3感应鼠标背景闪烁和图片缩放效果,一款超棒的CSS3特效,鼠标滑过增加一点动画效果,让网页飞起来,CSS3会助你一臂之力哦。...

CSS3背景闪烁和图片缩放动画效果

CSS3感应鼠标的背景闪烁和图片缩放动态效果 /*标题背景*/ h2{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300p...
  • lmnotlm
  • lmnotlm
  • 2014年05月05日 14:44
  • 1625

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

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

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

这个 CSS3 的效果怎么实现呢? HTML 设计成这样: 1 p class="overimg"> 2     ...

CSS3鼠标悬停图片时镜面白光闪过

闪光图片 *{ margin:0; padding:0;} .box{ position: relative; box-shadow: 0 0 10px #FFF; } em{ positio...
  • boyit0
  • boyit0
  • 2016年08月23日 10:01
  • 1150

css3文字霓虹灯光效果

css3文字霓虹灯光效果         *{   margin: 0;   padding: 0; } body{   background-color: ...

纯CSS3绘制打火机动画火焰特效

主要涉及到了以下属性: animation(webkit-animation), @keyframes name (@-webkit-keyframes name), transform, tran...
  • cwzhsi
  • cwzhsi
  • 2015年03月26日 20:29
  • 661

CSS3实现3D立体效果

CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及...

CSS3 transform介绍|如何设计炫酷的动画效果

CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。本篇就介绍一下transf...
  • yeana1
  • yeana1
  • 2016年07月08日 15:44
  • 3288

用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜

雪花飘落: //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-animation...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3实现图片划过一束光闪过效果
举报原因:
原因补充:

(最多只允许输入30个字)