Maison > Article > interface Web > CSS3 implémente un code d'effet flash sympa

CSS3 implémente un code d'effet flash sympa

零下一度original: 2017-05-03 13:55:596131parcourir

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 =“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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Vous faire comprendre le début du code CSS de WeChat H5Article suivant：Vous faire comprendre le début du code CSS de WeChat H5

Articles Liés

Voir plus