CSS3 implémente un code d'effet flash sympa-tutoriel CSS-php.cn

CSS3 implémente un code d'effet flash sympa

零下一度

Libérer： 2017-05-03 13:55:59

original

6146 Les gens l'ont consulté

Lorsque la souris est déplacée vers le haut, il y aura un flash de lumière sur l'image, l'effet est très cool. Alors réalisons à nouveau cet effet :
L'idée générale est de concevoir un calque transparent, le skewx se déforme de moins 25 degrés sur l'axe X, la couleur d'arrière-plan utilise le dégradé linéaire du dégradé linéaire CSS3, puis le temps de survol, réglez le temps d'animation sur 0,5 s.
En même temps, utilisez le curseur : pointeur sur le calque i. Si vous ne définissez pas cela, vous devez attendre l'animation du calque transparent pour le voir
Ce sera plus clair !

<！DOCTYPE html >  
    <html xmlns =“m.sbmmt.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 =“m.sbmmt.com/librarys/images/201402/2014_02_15_01.jpg”> </a>  
        <i class =“light”> </ i>  
    </ p>  
    </ body>  
    </ html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!