html5 css3 contoh tutorial Animasi berjalan robot kecil dilaksanakan dalam kemahiran tutorial html5 dan css3_html5

Saya telah memperkenalkan banyak animasi yang dilaksanakan oleh html5 dan css3 sebelum ini. Hari ini saya ingin membawakan anda animasi berjalan robot kecil yang dilaksanakan oleh html5 dan css3. Watak dalam contoh ini dilukis dengan HTML5, dan kesan animasi dicapai dengan HTML5 dan CSS3. Mari kita lihat pada rendering.

Kod pelaksanaan.

　kod html:

Salin kod

Kod tersebut adalah seperti berikut:

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




;g>
L287.8,189.9z" />


;










c2.5-0.2,3.8,1.5,2.8,3.9L228.7,267.5z" />






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





isian laluan="#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>










< isi laluan="#FDBF88" lejang="#000000" lejang-lebar="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.9. ,13.2
l46.4,23.2c4.5,2.2,11.8,2.2,16.3,0L288.6,197.1z" />

🎜 l46.4-23.2c4.5-2.2,8.1,0,8.1,5V183.9z" />



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 {
-saiz-kotak-moz: kotak-sempadan;
saiz-kotak: kotak sempadan;
}
*, *:sebelum, *:selepas {
-saiz-kotak-moz: mewarisi;
saiz-kotak: mewarisi;
}

html,badan {
tinggi:100%;
jidar: 0;
fon: 40px/40px "Helvetica Neue";
berat fon: 900;
warna: rgba(255, 255, 255, 1);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

svg {
lebar: 100%;
tinggi: 100%;
}

#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px;
/*animasi: nadi 2s linear tak terhingga;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
asal-ubah: 235px 173px;
-webkit-animasi: kepala 2s memudahkan-masuk-keluar tanpa had;
animasi: kepala 2s mudah-masuk-keluar tanpa had;
}

#kening-kanan, #kening-kiri {
-webkit-animasi: kening 10s linear infinite;
animasi: kening 10s linear infinite;
}

#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
-webkit-animasi: kaki kiri 2s memudahkan masuk-keluar tanpa had;
animasi: kaki kiri 2s memudahkan masuk-keluar tanpa had;
}

#kanan-kaki {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225px 235px;
-webkit-animasi: kaki kanan 2s memudahkan masuk-keluar tanpa had;
animasi: kaki kanan 2s memudahkan masuk-keluar tanpa had;
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-ms-transform-origin: 263px 186px;
transform-origin: 263px 186px;
-webkit-animasi: lengan kiri 2s memudahkan masuk-keluar tanpa had; Animasi
: lengan kiri 2s memudahkan masuk-keluar tanpa had;
}

#kanan-lengan {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
-webkit-animasi: lengan kanan 2s memudahkan masuk-keluar tanpa had;
animasi: lengan kanan 2s memudahkan masuk-keluar tanpa had;
}
#rambut {
-penapis webkit: hue-rotate(45deg);
penapis: hue-rotate(45deg) ; /* izza tidak bekerjaz! */
}

@-webkit-keyframes kaki kiri {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(55deg);
transform: rotate(55deg);
}
100%{
-webkit-transform: rotate(0deg);
ubah: putar(0deg);
}
}

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

@-webkit-keyframes kaki kanan {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: putar(25deg);
}
}

@keyframes kaki kanan {
0%{
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
50%{
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
100%{
-webkit-transform: rotate(25deg);
transform: putar(25deg);
}
}

@-webkit-keyframes lengan kanan {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
transform : putar(0deg);
}
}

@keyframes rightarm {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate( 0deg);
}
}

@-webkit-keyframes leftarm {
0%{
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
50%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(50deg);
transform : putar(50deg);
}
}

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

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

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

@-webkit-keyframes nadi {
0%{
-webkit-transform: scale(1);
transform: scale(1);
}
50%{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100%{
-webkit-transform: scale(1);
transformasi: skala(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 : skala(1);
}
}

@-webkit-keyframes kening {
0%{

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

@keyframes kening {
0%{

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