之前介紹了很多款html5和css3實現的動畫，今天要為大家帶來一款html5和css3實現的小機器人走路動畫。該實例的人物用html5繪畫的，動畫效果是html5和css3實現的。一起看下效果圖。
實作的程式碼。
html代碼：
css3代碼：
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
}
#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);
