CSS3实现一个效果酷炫的闪光特效代码

2020-11-27 来源：小侦探旅游网

当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：
大体思想是，设计一个透明层我，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。
同时在i层使用cursor：pointer，如果不设置这个的话，需要等透明层动画之后才能看到
会更加清楚！

<！DOCTYPE html > 
 <html xmlns =“www.gxlcms.com/1999/xhtml”> 
 <head> 
 <meta http-equiv =“Content-Type”content =“text / html; charset = utf-8”/> 
 <title>闪光图片</ title> 
 <style> 
 .overimg { 
 位置：亲戚; 
 显示：块; 
 / * overflow：hidden; * / 
 box-shadow：0 0 10px #FFF; 
 } 
 。光{ 
 cursor：pointer; 
 位置：绝对 
 左：-180px; 
 顶部：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））; 
 变换：skewx（-25deg）; 
 -o-transform：skewx（-25deg）; 
 -moz变换：skewx（-25deg）; 
 -webkit-transform：skewx（-25deg）; 
 
 } 
 .overimg：hover .light { 
 左：180px; 
 -moz-transition：0.5s; 
 -o-transition：0.5s; 
 -webkit转换：0.5s; 
 过渡：0.5s; 
 } 
 </ style> 
 
 </ head> 
 <body> 
 <p class =“overimg”> 
 <a> <img src =“www.gxlcms.com/librarys/images/201402/2014_02_15_01.jpg”> </a> 
 <i class =“light”> </ i> 
 </ p> 
 </ body> 
 </ html>

显示全文

全部栏目

CSS3实现一个效果酷炫的闪光特效代码