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实现图片划过一束光闪过效果(图片光影掠过效果)
  • youcijibi
  • youcijibi
  • 2017年10月12日 16:43
  • 268

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

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

js实现光标闪烁

$(function() { setInterval(function() { var $_inputSpan = $("#inputPrice").find(".cursor"); var $...
  • baidu_31333625
  • baidu_31333625
  • 2017年03月22日 16:35
  • 1205

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

.img { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .img:before { c...
  • xiaoya_syt
  • xiaoya_syt
  • 2016年08月30日 16:38
  • 1668

css3实现闪光效果

转载地址:http://www.zhouwenbin.com/wp-content/uploads/2012/05/css3-ting.htm css3实现闪光效果 .img{ p...
  • abxn2002
  • abxn2002
  • 2014年11月05日 23:39
  • 1772

前端的鼠标滑过图片闪光CSS3效果怎么做?

前端的鼠标滑过图片闪光CSS3效果怎么做?闪光滑动效果怎么做?
  • t_bag_teddybear
  • t_bag_teddybear
  • 2017年06月18日 18:39
  • 288

css白光划过效果

在知乎上看到一位大牛卖《web开发实战》。自己花几块钱来学习,代码可能大部分会一样。贴上来只是供自己以后学习,和自己的一些见解 题目要求实现一张图片,鼠标移到上面有白光划过, 先贴...
  • qq_33501079
  • qq_33501079
  • 2017年05月23日 23:06
  • 253

CSS3 实现 网页顶部进度条

有朋友们问网页顶部进度条 如何应用,现在github 大部分国外网站 都在用,这个效果可以使用现成的一些插件比如  这个,这个,还有这个。比如youtobe: 前些时候有注意到YouTube网站放出的...
  • xllily_11
  • xllily_11
  • 2016年08月15日 17:55
  • 6317

一道闪光在图片上划过

在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下: 大体思想是,设计一个透明层i,...
  • u011986449
  • u011986449
  • 2014年02月17日 13:08
  • 1827

css3实现当鼠标经过图片是 图片上有一道倾斜的闪光划过

css3实现当鼠标经过图片是 图片上有一道倾斜的闪光划过,之前京东商城上有过这样的效果...
  • xsxlff1314
  • xsxlff1314
  • 2017年10月19日 09:36
  • 158
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3实现图片划过一束光闪过效果
举报原因:
原因补充:

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