CSS3实现在图片上划过产生一道闪光

最新推荐文章于 2024-07-08 00:01:13 发布

weixin_33766168

最新推荐文章于 2024-07-08 00:01:13 发布

阅读量227

点赞数

文章标签： python

原文链接：https://my.oschina.net/coder1234/blog/1555119

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html"> 
 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>闪光图片</title> 
 <style> 
 .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; 
 } 
 </style> 
 
 </head> 
 <body> 
 <p class="overimg"> 
 <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a> 
 <i class="light"></i> 
 </p> 
 </body> 
 </html>

转载于:https://my.oschina.net/coder1234/blog/1555119