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

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

黄舟

Libérer： 2017-03-22 16:22:24

original

1662 Les gens l'ont consulté

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>

Copier après la connexion

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;
}

Copier après la connexion

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;}
}

Copier après la connexion

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);
}

Copier après la connexion

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;
}

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!