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

来源：动视网责编：小采时间：2020-11-27 18:51:52

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

CSS3实现一个效果酷炫的闪光特效代码:当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：大体思想是，设计一个透明层我，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。同时

推荐度：

点击下载本文 文档为doc格式

导读CSS3实现一个效果酷炫的闪光特效代码:当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：大体思想是，设计一个透明层我，skewx在X轴上做了负25度的变形，背景颜色用的是CSS3的线性渐变linear-gradient，然后hover的时候，设置0.5s的动画时间。同时

当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：
大体思想是，设计一个透明层我，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实现一个效果酷炫的闪光特效代码

推荐度：

点击下载本文 文档为doc格式

标签：特效代码闪光

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐