Exemple de didacticiel html5 css3 Une animation de marche d'un petit robot implémentée dans les compétences du didacticiel html5 et css3_html5

J'ai déjà présenté de nombreuses animations implémentées par html5 et css3. Aujourd'hui, je souhaite vous présenter une animation de marche d'un petit robot implémenté par html5 et css3. Les personnages de cet exemple sont dessinés avec HTML5 et les effets d'animation sont obtenus avec HTML5 et CSS3. Jetons un coup d'œil aux rendus.

Code d'implémentation.

　code html :

Copier le code

Le code est le suivant :

x="0px" y="0px" viewbox="0 0 458 337" activer-background="new 0 0 458 337" xml:space="preserve">





< ;g>





















< ;chemin d="M274.9,211c0,2.5-1.8,5.5-4.1,6.6l-41.4,20.7c-2.2,1.1-4.1,0-4.1-2.5v-35.4c0-2.5,1.8-5.5,4.1- 6.6l41.4-20.7
c2.2-1.1,4.1,0,4.1,2.5V211z" />






< chemin fill="#FDB473" d="M223.7,238.6l5.5,9.2c0.8,2.4,2.9,2.8,4.7,1l1-1.1c1.8-1.8,2.5-5.2,1.7-7.6l-2.5- 7.3
C231,236,227.5,237.7,223.7,238.6z" />

< ;/g>











< path fill="#FDBF88" Stroke="#000000" Stroke-width="0.9111" d="M288.6,197.1c4.5-2.2,8.2-8.2,8.2-13.2l0-52.5
c0-5-3.7 -10.9-8.1-13.2L242,94.9c-4.5-2.2-11.8-2.2-16.3,0l-46.4,23.4c-4.5,2.3-8.1,8.2-8.1,13.2v52.4c0,5,3.7,10.9,8.1 ,13.2
l46.4,23.2c4.5,2.2,11.8,2.2,16.3,0L288.6,197.1z" />





y1="180,6" x2="266,4" y2="181,7" />
y1="177.4" x2="288.4" y2="164.6" />
r="3.8" />
r="3.8" />










gradientunits="userSpaceOnUse">

　　css3代码：

复制代码

代码如下 :

html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:avant, *:après {
-moz-box-sizing : hériter ;
box-sizing : hériter;
}

html,body {
hauteur:100%;
marge: 0;
police: 40px/40px "Helvetica Neue";
police-poids: 900;
couleur: rgba(255, 255, 255, 1);
-webkit-font-smoothing : antialiased;
font-smoothing : antialiased;
}

svg {
largeur : 100 %;
hauteur : 100%;
}

#oeil gauche {
-webkit-transform-origin : 283px 176px;
-ms-transform-origin : 283px 176px;
transform-origin : 283px 176px;
/*animation : impulsion 2s linéaire infinie ;*/
}
#head {
-webkit-transform-origin : 235px 173px;
-ms-transform-origin : 235px 173px;
transformation-origine : 235px 173px ;
-webkit-animation : facilité d'entrée et de sortie de la tête 2s infinie ;
animation : tête 2s facilité d'entrée-sortie infinie ;
}

#right-eyebrow, #left-eyebrow {
-webkit-animation : sourcils 10s linéaires infinis ;
animation : sourcils 10s linéaires infinis ;
}

#left-leg {
-webkit-transform-origin : 253px 225px;
-ms-transform-origin : 253px 225px;
transform-origin : 253px 225px;
-webkit-animation : jambe gauche 2s facilité d'entrée-sortie infinie ;
animation : jambe gauche 2s facilité d'entrée-sortie infinie ;
}

#right-leg {
-webkit-transform-origin : 225px 235px;
-ms-transform-origin : 225px 235px;
transform-origin : 225px 235px;
-webkit-animation : jambe droite 2s facilité d'entrée-sortie infinie ;
animation : jambe droite 2s facilité d'entrée-sortie infinie ;
}
#bras gauche {
-webkit-transform-origin : 263px 186px;
-ms-transform-origin : 263px 186px;
transformation-origine : 263px 186px ;
-webkit-animation : facilité d'entrée et de sortie du bras gauche 2 infini ;
animation : bras gauche 2s facilité d'entrée-sortie infinie ;
}

#bras droit {
-webkit-transform-origin : 209px 214px;
-ms-transform-origin : 209px 214px;
transform-origin : 209px 214px;
-webkit-animation : bras droit 2s facilité d'entrée-sortie infinie ;
animation : bras droit 2s facilité d'entrée-sortie infinie ;
}
#hair {
-webkit-filter : teinte-rotation (45deg);
filtre : teinte-rotation (45deg) ; /* Izza ne fonctionne pas ! */
}

@-webkit-keyframes jambe gauche {
0%{
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
50 %{
-webkit-transform : rotation(55deg);
transformation : rotation(55deg);
}
100 %{
-webkit-transform : rotation(0deg);
transformation : rotation(0deg);
}
}

@keyframes jambe gauche {
0%{
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
50 %{
-webkit-transform : rotation (55deg);
transformation : rotation (55deg);
}
100 %{
-webkit-transform : rotation (0deg);
transformation : rotation(0deg);
}
}

@-webkit-keyframes jambe droite {
0 %{
-webkit-transform : rotate(25deg);
transform : rotate(25deg);
}
50 %{
-webkit-transform : rotation(-40deg);
transform : rotation(-40deg);
}
100 %{
-webkit-transform : rotation(25deg);
transformer : rotation(25deg);
}
}

@keyframes rightleg {
0%{
-webkit-transform : rotate(25deg);
transform : rotate(25deg);
}
50 %{
-webkit-transform : rotation(-40deg);
transformation : rotation(-40deg);
}
100 %{
-webkit-transform : rotation(25deg);
transformation : rotation(25deg);
}
}

@-webkit-keyframes bras droit {
0%{
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
50 %{
-webkit-transform : rotation (40deg);
transformation : rotation (40deg);
}
100 %{
-webkit-transform : rotation (0deg);
transformation : rotation(0deg);
}
}

@keyframes bras droit {
0 %{
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
50 %{
-webkit-transform : rotation (40deg);
transformation : rotation (40deg);
}
100 %{
-webkit-transform : rotation (0deg);
transformation : rotation ( 0deg);
}
}

@-webkit-keyframes bras gauche {
0%{
-webkit-transform : rotate(50deg);
transform : rotate(50deg);
}
50 %{
-webkit-transform : rotation(0deg);
transformation : rotation(0deg);
}
100 %{
-webkit-transform : rotation(50deg);
transformation : rotation(50deg);
}
}

@keyframes bras gauche {
0%{
-webkit-transform : rotate(50deg);
transform : rotate(50deg);
}
50 %{
-webkit-transform : rotation(0deg);
transformation : rotation(0deg);
}
100 %{
-webkit-transform : rotation(50deg);
transformation : rotation( 50deg);
}
}

@-webkit-keyframes head {
0%{
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
50 %{
-webkit-transform : rotation(-5deg);
transformation : rotation(-5deg);
}
100 %{
-webkit-transform : rotation(0deg);
transformer : rotation(0deg);
}
}

@keyframes head {
0%{
-webkit-transform : rotate(0deg);
transform : rotate(0deg);
}
50 %{
-webkit-transform : rotation(-5deg);
transformation : rotation(-5deg);
}
100 %{
-webkit-transform : rotation(0deg);
transformation : rotation(0deg);
}
}

@-webkit-keyframes pulse {
0%{
-webkit-transform : scale(1);
transform : scale(1);
}
50 %{
-webkit-transform : scale(1.1);
transform : scale(1.1);
}
100 %{
-webkit-transform : scale(1);
transformation : scale(1);
}
}

@keyframes pulse {
0 %{
-webkit-transform : scale(1);
transform : scale(1);
}
50 %{
-webkit-transform : scale(1.1);
transform : scale(1.1);
}
100 %{
-webkit-transform : scale(1);
transform : échelle(1);
}
}

@-webkit-keyframes sourcils {
0%{

}
98%{
-webkit-transform: traduire(0, 0px);
transformer : traduire(0, 0px);
}
99 %{
-webkit-transform : traduire(0, -5px);
transformation : traduire(0, -5px);
}
100 %{
-webkit-transform : translate(0, 0px);
transform : translate(0, 0px);
}
}

@keyframes sourcils {
0%{

}
98%{
-webkit-transform: traduire(0, 0px);
transform: traduire(0 " 100 %{
-webkit-transform : translate(0, 0px);
transform : translate(0, 0px);
}
}