欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-09 13:49:06
...
当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的。于是把这个效果再实现一下:
大体思想是,设计一个透明层我,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实现一个效果酷炫的闪光特效代码的详细内容,更多请关注其它相关文章!

相关标签: CSS,特效