Maison >interface Web >Tutoriel H5 >Comment utiliser HTML5 et CSS3 pour réaliser une animation de graffiti Google

Comment utiliser HTML5 et CSS3 pour réaliser une animation de graffiti Google

PHP中文网original: 2017-03-16 13:17:421880parcourir

Aujourd'hui, nous allons vous présenter comment utiliser CSS3 pour compléter une animation Google Doodle. Lorsque vous cliquez sur le bouton [Démarrer] sur la page de démonstration, les cavaliers et les chevaux sur la page se déplaceront
Une chose qui doit être soulignée ici est qu'IE ne prend pas en charge les attributs d'animation de CSS3, et je m'en plains le maléfique IE encore. 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.
Présentons comment créer 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.
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 { 
% {background-position: 0 0;} 
% 
{background-position: -804px 0;} 
} 
@-moz-keyframes horse-ride { 
% 
{background-position: 0 0;} 
% {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 une pseudo-classe, qui fait référence à l'effet CSS lorsque #play_button est sélectionné, et ~ fait référence au nœud frère 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; 
}

Vous pouvez essayer de le développer vous-même.

Articles Liés

Voir plus