CSS3实现一个效果酷炫的闪光特效代码-css教程-PHP中文网

首页

web前端

css教程

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

零下一度

May 03, 2017 pm 01:55 PM

当鼠标移上去的时候，会有一道闪光在图片上划过，效果挺酷炫的。于是把这个效果再实现一下：
大体思想是，设计一个透明层我，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实现一个效果酷炫的闪光特效代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn