html5 css3實例教學一款html5與css3實作的小機器人走路動畫

首頁

web前端

H5教程

html5 css3實例教學一款html5與css3實作的小機器人走路動畫_html5教學技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:47 PM

css3css3動畫html5

　　之前介紹了很多款html5和css3實現的動畫，今天要為大家帶來一款html5和css3實現的小機器人走路動畫。該實例的人物用html5繪畫的，動畫效果是html5和css3實現的。一起看下效果圖。

　　實作的程式碼。

　　html代碼：

複製程式碼

程式碼如下:

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

c1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5C285.8,208.8, 274.7,214. />
C289.8,202.2,286.7,205.6,282.9,208.4z" />

c-1.2,2.2-1,5.7,0.4,7.7l22.8,32.9C274.7,214.1,285.8,208.8,291.1,199.4z" />
路徑38,M89. -19.6c-1.4-2.1-3.6-1.9-4.8,0.3l-0.7,1.3c-1.2,2.2-1,5.7,0.4,7.7l16,27.8 l1,1c3.8-2.7,6.9-6.2,8. 10.3
L287.8,189.9z" />
c-1.2,2.2-4.2,4.3-6.7,4.6l-15.7,2.2c-2.5, 0.4-3.5-1.2-2.3-3.3l01. .2-2.2,4.2-4.3,6.7-4.6L263.8,167.2z" />

;

c-1. 2.1-4.4-3.7-6.9-3.5l-17.8,1.5c-2.5,0.2-5.6,2.1-7,4.2l-7.3 ,11.7c-1.3,2.1-1.4,5.6-0.1,7.l18.
c1.3,2.1,4.4,3.7,6.9,3.5l17.7-1.4c2.5-0.2,5.6-2.1 ,7-4.2L283.7,246z" />
c1.3-2.1,3.5-2.1,4.8,0L283 .7,238.2z" />
c-1.3-2.1-4.4-3.7-6. -3.5l-17.7,1.4c-2.5,0.2-3.5,2.1-2.2,4.3L244.7,259.8z" />
c-1.3,2.1-4.5,4-7,4.2l-17.8,1.5c-2. -3.4-1.4-2.1-3.5l7.4-11.7c1.3-2.1,4.5-4 ,7-4.2L258.5,204.5z" />

c0.9-2.3,0.4-5.8-1.3-7.6 l-11.8-13.4c-1.7-1.9-5-3.3-7.5-3.1l-13.7,1.1c-2.5,0.2-5.3,2.3-6. ,4.6L188.1,249
c-0.9,2.3-0.4, 5.8,1.3,7.6l11.7,13.4c1.7,1.9,5,3.3,7.5,3.1L222.5,272.1z"路徑填充="#BFBFBF" 描邊="#000000" 描邊-width="0.9111" d="M209.3,218.1l-1.6-6.4c-2.5,0.2-5.3,2.3-6.3,4.6L209.5,0.2-5.3,2.3-6.3,4.6L209.3, " />
c2.5-0.2,3.8,1.5,2.8,3.9L228.7,267.5z" />
l- 11.7-13.4c-1.7-1.9-3.8-1.5-4.7,0.8L188.1,249z" />
c-2.5,0.2-5.9-1.17. l-11.8-13.4c-1.7-1.9- 1-3.6,1.5-3.8l13.8-1.1c2.5-0.2,5.9,1.2,7.5,3.1L240.8,227.1z" />

c0-2.5-1.8-5.5-4.1-6.6l-23.3-11.6c-2.2-1.1-5.9-1.1-8.1,0L198,17.8. 4.1-4.1,6.6v35。 3c0,2.5,1.8,5.5,4.1,6.6
l23.2,11.6c2.2,1.1,5.9,1.1,8.1,0L270.8,217.6z" />
BF >; "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,411. -20.7
c2.2-1.1,4.1,0,4.1,2.5V211z" />
c2.2,1.1,4.1,0,4.1-2.5v-35.4c0-2.5-1.8-5.5-4.1-6.6L198,182.3c-2.2-1.1-4.1,0-4.1,2.5V220.2z"/> 🎜> 🎜> 🎜> 🎜> 🎜> 🎜> -2.2,1.1-5.9,1.1-8.1,0l-23.3-11.7c-2.2-1.1-2.2-3,0-4.1l41.5-20.8c2.2-1.1,5.9-1.1,8.1,0L270 . " />

c2.5,0.3, 6-0.9,7.7-2.7l1. 1-1.1c1.8-1.8,2.5-5.2,1.7-7.6l-2.5-7.3C225.3,241.7,213.3,239.4,201.8,237z"/>
C23,2367. ,238.6z" />
L204.4,244.5z" />

c-2.5-0.3-5.9,0.9-7.7,2.7l-1,1.1c-1.7,1.8-2.5,5.2-1.7,7.6l11 .9,34.5C213.3,239.4,225.3,39. z" />

C227.5,237.7,231,236,234.1,232.9z" />
c8.2,1.7,16.8,3.8,24
c8.2,1.7,16.8,3.8,24
c8.2,1.7,16.8,3.8,24
c8.2,1.7,16.8,3.8,24. ,2.1l-1.1-1.8L214.5,205.7z" />
c-1.8,1.8-5.2,3-7.7,2.7 l-15.7-2.1c-2.5-0.3-3.1-2.1-1.3-3.9l1. 1.1c1.8-1.8,5.2-3,7.7-2.7L216,193.2z" />
g>

c0-5-3.7 -10.9-8.1-13.2L242,94.9c-4.5-2.2-11.8-2.2-16.3,0l-4.5-2.2-11.8-2.2-16.3,0l-46.4,53. 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,0L28.6,197.1,197.
l46.4-23.2c4.5-2.2,8.1,0,8.1,5V183.9z" />
l-46.4-23.2c-4.5-2.2-8.1, 0-8.1,5V183.9z" />
c-4.5-2.2-4.5-5.9,0-8.1l46.6-23.3c. ,11.8-2.2,16.3,0L288.6,118.2z" />

y1="180.6" x2="266.4" y2="181.7" />
y1="177.4" x2="288.4" y2="164.6" />
r="3.8" />
r="3.8" />

223.4,55.6 227.5,102.7 227.5,102.7 201.1,67 201.1,67 215.7,102.7 215.7,102.7 1917.37. 9 204.7,103.9
185.6,93.4 185.6,93.4 " / >

gradientunits="userSpaceOnUse">

css3代碼：

複製程式碼程式碼如下：

html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:之前, *:之後{
-moz-box-sizing: 繼承;
box-sizing: 繼承;
}

html,body {
高度:100%;
邊距:0;
字體:40px/40px "Helvetica Neue";
字體粗細:900;
顏色: rgba (255, 255, 255, 1);
-webkit-font-smoothing: 抗鋸齒;
字體平滑: 抗鋸齒;
}

svg {
寬度：100%;
高度：100%;
}

#left-eye {
-webkit-transform-origin: 283px 176px;
-ms-transform-origin: 283px 176px;
transform-origin: 283px 176px; ：脈衝2s線性無限;*/
}
#head {
-webkit-transform-origin: 235px 173px;
-ms-transform-origin: 235px 173px;
變換原點：變換原點： 235px 173px;
-webkit-animation：頭部2 秒緩入無限;
動畫：head 2s 緩入出無限;
}

#right-eyebrow, #left-eyebrow {
-webkit-animation: 眉毛 10s 線性無限;
動畫: 眉毛 10s 線性無限;
}

#left-leg {
-webkit-transform-origin: 253px 225px;
-ms-transform-origin: 253px 225px;
transform-origin: 253px 225px;
transform-origin: 253px 225p; animation：leftleg 2s 無限緩入；
動畫：leftleg 2s 緩入無限；
}

#right-leg {
-webkit-transform-origin: 225px 235px;
-ms-transform-origin: 225px 235px;
transform-origin: 225pxx 235px;
transform-origin: 225pxx 235px 動畫：右腿 2s 緩入出無限；
}
#left-arm {
-webkit-transform-origin: 263px 186px;
-webkit-transform-origin: 263px 186px;
; -ms-transform-origin: 263px 186px;
變換原點：263px 186px;
-webkit-animation：左臂2 秒緩出無限；
動畫：左臂2s 緩入無限；
}

#right-arm {
-webkit-transform-origin: 209px 214px;
-ms-transform-origin: 209px 214px;
transform-origin: 209px 214px;
transform-origin: 209px 214px; animation：右臂2 秒緩入無限；
動畫：右臂2 秒緩入無限；
}
#hair {
-webkit-filter：hue-rotate(45deg);
過濾器：hue-rotate(45deg) ; /* 伊扎不工作！ */
}

@-webkit-keyframes leftleg {
0%{
-webkit-transform: 旋轉(0deg);
轉換: 旋轉(0deg);
}
50 %{
-webkit-transform: 旋轉(55deg);
變換: 旋轉(55deg);
}
100%{
-webkit-transform: 旋轉(0deg);
變換：旋轉(0deg);
}
}

@keyframes leftleg {
0%{
-webkit-transform: 旋轉(0deg);
變換: 旋轉(0deg);
}
50%{
-webkit-transform: 旋轉(55deg);
變換: 旋轉(55deg);
}
100%{
-webkit-transform: 旋轉(0deg);
變換:旋轉(0deg);
}
}

@-webkit-keyframes rightleg {
0%{
-webkit-transform: 旋轉(25deg);
轉換: 旋轉(25deg);
}
50%{
-webkit-transform: 旋轉(-40deg);
變換: 旋轉(-40deg);
}
100%{
-webkit-transform: 旋轉(25deg);
變換：旋轉(25deg);
}
}

@keyframes rightleg {
0%{
-webkit-transform: 旋轉(25deg);
轉換: 旋轉(25deg);
}
50%{
-
}
50%{
-
- webkit-transform: 旋轉(-40deg);
變換: 旋轉(-40deg);
}
100%{
-webkit-transform: 旋轉(25deg);
變換: 旋轉(25deg);
}
}

@-webkit-keyframes 右臂{
0%{
-webkit-transform: 旋轉(0deg);
變換: 旋轉(0deg);
}
50%{
-webkit-transform: 旋轉(40deg);
變換: 旋轉(40deg);
}
100%{
-webkit-transform: 旋轉(0deg);
變換🎜> -webkit-transform: 旋轉(0deg);
變換🎜> : 旋轉(0deg);
}
}

@keyframes rightarm {
0%{ -webkit-transform: 旋轉(0deg); 轉換: 旋轉(0deg); } 50%{-webkit-transform: 旋轉(40deg);
變換: 旋轉(40deg);
}
100%{
-webkit-transform: 旋轉(0deg);
變換: 旋轉( 0deg);
}
}

@-webkit-keyframes leftarm {
0%{
-webkit-transform: 旋轉(50deg);
變換: 旋轉(50deg);
}
50%{
-webkit-transform: 旋轉(0deg);
變換: 旋轉(0deg);
}
100%{
-webkit-transform: 旋轉(50deg);
變換:旋轉(50deg);
}
}

@keyframes leftarm {
0%{
-webkit-transform: 旋轉(50deg);
變換: 旋轉(50deg);
}
50%{
-
}
50%{
-
}
50%{
-
-
50%{
-
- webkit-transform: 旋轉(0deg);
變換: 旋轉(0deg);
}
100%{
-webkit-transform: 旋轉(50deg);
變換換);
}
}

@-webkit-keyframes head {
0%{
-webkit-transform: 旋轉(0deg);
轉換: 旋轉(0deg);
}
50%{
-webkit-transform: 旋轉(-5deg);
變換: 旋轉(-5deg);
}
100%{
-webkit-transform: 旋轉(0deg);
變換：旋轉(0deg);
}
}

@keyframes head {
0%{
-webkit-transform: 旋轉(0deg);
轉換: 旋轉(0deg);
}
50%{
- webkit-transform: 旋轉(-5deg);
變換: 旋轉(-5deg);
}
100%{
-webkit-transform: 旋轉(0deg);
變換(0deg);
}
}

@-webkit-keyframes 脈衝{
0%{
-webkit-transform:scale(1);
變換:scale(1);
}
50 %{
-webkit-transform:scale(1.1);
變換:scale(1.1);
}
100%{
-webkit-transform:scale(1);
變換：scale(1);
}
}

@keyframes 脈衝{
0%{
-webkit-transform:scale(1);
轉換:scale(1);
}
50%{
-webkit-transform:scale(1.1);
變換:scale(1.1);
}
100%{
-webkit-transform:scale(1);
變換:比例(1);
}
}

@-webkit-keyframes 眉毛{
0%{

}
98%{
-webkit-transform: 翻譯(0, 0px);
轉換: 翻譯: (0, 0px);
}
99%{
-webkit-transform: 翻譯(0, -5px);
轉換: 翻譯(0, -5px);
}
100%{
-webkit-transform: 翻譯(0, 0px);
轉換: 翻譯(0, 0px);
}
}

@keyframes 眉毛{
0%{

}
98%{
-webkit-transform: 翻譯(0, 0px);
轉換: 翻譯(0 , 0px);

} 99%{ -webkit-transform: 翻譯(0, -5px); 轉換: 翻譯(0, -5px); } 100 %{ -webkit-transform: 翻譯(0, 0px); 變換: 翻譯(0, 0px); }}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

理解H5：含義和意義May 11, 2025 am 12:19 AM

H5是HTML5，是HTML的第五個版本。 HTML5提升了網頁的表現力和交互性，引入了語義化標籤、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術的發展。

H5：可訪問性和網絡標準合規性May 10, 2025 am 12:21 AM

無障礙訪問和網絡標準遵循對網站至關重要。 1）無障礙訪問確保所有用戶都能平等訪問網站，2）網絡標準遵循提高網站的可訪問性和一致性，3）實現無障礙訪問需使用語義化HTML、鍵盤導航、顏色對比度和替代文本，4）遵循這些原則不僅是道德和法律要求，還能擴大用戶群體。

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

See all articles