Maison >interface Web >Tutoriel H5 >Explication pratique HTML5 détaillée sur la façon de réaliser une animation de graffiti Google à l'aide de CSS3

Explication pratique HTML5 détaillée sur la façon de réaliser une animation de graffiti Google à l'aide de CSS3

黄舟original: 2017-03-22 16:22:241697parcourir

Aujourd'hui, nous allons vous présenter comment utiliser CSS3 pour réaliser une animation de graffiti Google. Lorsque vous cliquez sur le bouton [Démarrer] sur la page de démonstration, les cavaliers et les chevaux sur la page se déplacent

Une chose qui doit être soulignée ici est qu'IE ne prend pas en charge les attributs d'animation de CSS3. je me plains encore du mal IE. Mais nous ne pouvons pas utiliser cela comme une raison pour ne pas adopter le CSS3.

Regardons d'abord le code html.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/>
</head>
<body>
<p id="logo">
    <p class="frame">
        <img src="img/muybridge12-hp-v.png"/>
    </p>
    <label for="play_button" id="play_label"></label>
    <input type="checkbox" id="play_button" name="play_button"/>
    <span id="play_image">
        <img src="img/muybridge12-hp-p.jpg"/>
    </span>
    <p class="horse"></p>
    <p class="horse"></p>
    <p class="horse"></p>
</p>
</body>
</html>

Ce qui suit fait partie du CSS.

*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
    width:469px;
    height:54px;
    background: url(&#39;../img/muybridge12-hp-f.jpg&#39;);
}
.frame{position:absolute;left:0;top:0;z-index: 1;}

#play_button{display: none;}
#play_label{
    width:67px;
    height:54px;
    display:block;
    position: absolute;
    left:201px;
    top:54px;
    z-index: 2;
}
#play_image{
    position: absolute;
    left:201px;
    top:54px;
    z-index: 0;
    overflow: hidden;
    width: 68px;
    height: 55px;
}
#play_image img{
    position: absolute;
    left: 0;
    top: 0;
}

Cette partie du code n'est pas trop difficile, je ne l'expliquerai donc pas en détail. Les lecteurs qui n'ont pas de bases très solides en CSS peuvent se demander comment est positionné le bouton [Démarrer]. Vous pouvez lire vous-même l'attribut de position pour comprendre le rôle spécifique de l'absolu.

Ce qui suit est l'effet de page complété par le code html et css ci-dessus.

Voyons maintenant comment produire des effets d'animation. Nous devons d’abord définir des images clés, qui spécifient les effets de l’animation à différentes étapes. Vous pouvez en savoir plus sur http://www.w3schools.com/css3/css3_animations.asp.

Nous avons créé une image clé appelée horse-ride Pour Chrome et Firefox, vous devez ajouter le préfixe -webkit- ou -moz- devant. 0% et 100% sont respectivement le début et la fin du code. De nouveaux cas peuvent être ajoutés selon les besoins, comme l'effet d'animation à 50%.

@-webkit-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
    0% {background-position: 0 0;}
    100% {background-position: -804px 0;}
}

Ensuite, ajoutons des effets d'animation CSS3 au cheval.

#play_button:checked ~.horse{
    -webkit-animation:horse-ride 0.5s steps(12,end) infinite;
    -webkit-animation-delay:2.5s;
    -moz-animation:horse-ride 0.5s steps(12,end) infinite;
    -moz-animation-delay:2.5s;
    background-position: -2412px 0;
    -webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
    -moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

Ici, nous introduisons d'abord :checked et ~, :checked est la pseudo-classe , qui fait référence à l'effet CSS lorsque #play_button est sélectionné, et ~ fait référence au frère nœud de #play_button.

Ensuite, nous présenterons les attributs CSS liés à .horse. Nous utilisons 4 valeursdans l'animation, qui représentent : l'image clé (balade à cheval que nous avons définie ci-dessus), l'intervalle d'animation, l'effet d'animation et le numéro d'exécution. Ensuite, nous définissons le temps de retard de l'animation via animation-delay. Définissez l'animation de transition d'arrière-plan en combinant la transition et la position d'arrière-plan.

Enfin, nous ajoutons des effets d'animation au bouton [Démarrer].

#play_button:checked ~#play_image img{
    left:-68px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
}

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：Explication détaillée du code HTML5 sur l'utilisation de CSS pour créer des triangles et de CSS3 pour créer des tétraèdres 3DArticle suivant：Explication détaillée du code HTML5 sur l'utilisation de CSS pour créer des triangles et de CSS3 pour créer des tétraèdres 3D

Articles Liés

Voir plus