HTML5-CSS3-Beispiel-Tutorial Eine kleine Roboterlaufanimation, implementiert in HTML5- und CSS3_HTML5-Tutorial-Fähigkeiten

Ich habe bereits viele von HTML5 und CSS3 implementierte Animationen vorgestellt. Heute möchte ich Ihnen eine Laufanimation eines kleinen Roboters vorstellen, der von HTML5 und CSS3 implementiert wurde. Die Zeichen in diesem Beispiel werden mit HTML5 gezeichnet und die Animationseffekte werden mit HTML5 und CSS3 erzielt. Werfen wir einen Blick auf die Renderings.

Implementierungscode.

　HTML-Code:

Code kopieren

Der Code lautet wie folgt:

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





< ;g>





















< ;path 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" />






< path 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>











< Pfadfüllung = „#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;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}

html,body {
height:100%;
margin: 0;
Schriftart: 40px/40px „Helvetica Neue“;
Schriftstärke: 900;
Farbe: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

svg {
Breite: 100 %;
Höhe: 100 %;
}

#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px;
/*animation: puls 2s linear unendlich;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
transform-origin: 235px 173px;
-webkit-animation: Head 2s Easy-in-out unendlich;
Animation: Kopf 2s Easy-in-out unendlich;
}

#rechte Augenbraue, #linke Augenbraue {
-webkit-animation: Augenbrauen 10s linear unendlich;
Animation: Augenbrauen 10s linear unendlich;
}

#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
-webkit-animation: leftleg 2s easy-in-out unendlich;
Animation: 2 Sekunden leichtes Ein- und Ausfahren des linken Beins unendlich;
}

#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animation: rightleg 2s easy-in-out unendlich;
Animation: Rightleg 2s Easy-In-Out Infinity;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
-webkit-animation: leftarm 2s easy-in-out unendlich;
Animation: 2 Sekunden einfaches Ein- und Ausfahren des linken Arms unendlich;
}

#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animation: rightarm 2s easy-in-out unendlich;
Animation: Rightarm 2s Easy-in-out unendlich;
}
#hair {
-webkit-filter: hue-rotate(45deg);
filter: hue-rotate(45deg) ; /* Izza funktioniert nicht! */
}

@-webkit-keyframes leftleg {
0%{
-webkit-transform: rotieren(0deg);
transform: rotieren(0deg);
}
50 %{
-webkit-transform: rotieren(55 Grad);
transform: rotieren(55 Grad);
}
100 %{
-webkit-transform: rotieren(0 Grad);
transform: rotieren(0deg);
}
}

@keyframes leftleg {
0 %{
-webkit-transform: rotieren(0deg);
transform: rotieren(0deg);
}
50 %{
-webkit-transform: rotieren (55 Grad);
transformieren: rotieren (55 Grad);
}
100 %{
-webkit-transform: rotieren (0 Grad);
transformieren : rotieren(0deg);
}
}

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

@keyframes rightleg {
0 %{
-webkit-transform: rotieren(25deg);
transform: rotieren(25deg);
}
50 %{
-webkit-transform: rotieren (-40 Grad);
transformieren: drehen (-40 Grad);
}
100 %{
-webkit-transform: rotieren (25 Grad);
transformieren: drehen (25 Grad);
}
}

@-webkit-keyframes rightarm {
0 %{
-webkit-transform: rotieren(0deg);
transform: rotieren(0deg);
}
50 %{
-webkit-transform: rotieren (40 Grad);
transformieren: drehen (40 Grad);
}
100 %{
-webkit-transform: rotieren (0 Grad);
transformieren : rotieren(0deg);
}
}

@keyframes rechter Arm {
0 %{
-webkit-transform: rotieren(0deg);
transform: rotieren(0deg);
}
50 %{
-webkit-transform: rotieren(40 Grad);
transform: rotieren(40 Grad);
}
100 %{
-webkit-transform: rotieren(0 Grad);
transform: rotieren( 0deg);
}
}

@-webkit-keyframes leftarm {
0%{
-webkit-transform: rotieren(50deg);
transform: rotieren(50deg);
}
50%{
-webkit-transform: rotieren (0 Grad);
transformieren: drehen (0 Grad);
}
100 %{
-webkit-transform: rotieren (50 Grad);
transformieren : drehen (50 Grad);
}
}

@keyframes leftarm {
0 %{
-webkit-transform: rotation(50deg);
transform: rotation(50deg);
}
50 %{
-webkit-transform: rotieren(0deg);
transform: rotieren(0deg);
}
100 %{
-webkit-transform: rotieren(50deg);
transform: rotieren( 50 Grad);
}
}

0 %
-webkit-transform: rotieren (-5 Grad);
transform: rotieren (-5 Grad);
}
100 %{
-webkit-transform: rotieren (0 Grad);
transform: rotieren(0deg);
}
}

@keyframes head {
0 %{
-webkit-transform: rotieren(0deg);
transform: rotieren(0deg);
}
50 %{
-webkit-transform: rotieren (-5 Grad);
transformieren: drehen (-5 Grad);
}
100 %{
-webkit-transform: rotieren (0 Grad);
transformieren: rotieren(0deg);
}
}

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

@keyframes puls {
0 %{
-webkit-transform: scale(1);
transform: scale(1);
}
50 %{
-webkit-transform: Scale(1.1);
Transformation: Scale(1.1);
}
100 %{
-webkit-transform: Scale(1);
Transformation : Skala(1);
}
}

@-webkit-keyframes Augenbrauen {
0 %{

}
98 %{
-webkit-transform: translator(0, 0px);
transform: Translate(0, 0px);
}
99%{
-webkit-transform: Translate(0, -5px);
Transformation: Translate(0, -5px);
}
100 %{
-webkit-transform: Translate(0, 0px);
Transformation: Translate(0, 0px);
}
}

@keyframes Augenbrauen {
0 %{

}
98 %{
-webkit-transform: Translate(0, 0px);
Transformation: Translate(0 , 0px) 100 %{
-webkit-transform: Translate(0, 0px);
Transformation: Translate(0, 0px);
}
}