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

WBOY
Lepaskan: 2016-05-16 15:47:19
asal
1841 orang telah melayarinya

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan