CSS3实现一个效果酷炫的闪光特效代码
程序员文章站
2022-05-09 13:49:06
...
当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下:
大体思想是,设计一个透明层我,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。
同时在i层使用cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看到
会更加清楚!
大体思想是,设计一个透明层我,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间。
同时在i层使用cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看到
会更加清楚!
<!DOCTYPE html > <html xmlns =“www.php.cn/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.php.cn/librarys/images/201402/2014_02_15_01.jpg”> </a> <i class =“light”> </ i> </ p> </ body> </ html>
以上就是CSS3实现一个效果酷炫的闪光特效代码的详细内容,更多请关注其它相关文章!
上一篇: && ||的使用