中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用html5和css3實現的小機器人走路動畫

發布時間:2022-03-01 11:40:21 來源:億速云 閱讀:141 作者:小新 欄目:web開發

這篇文章主要介紹如何使用html5和css3實現的小機器人走路動畫,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

    html5代碼如下:

    <svgversion=“1.1”id=“Layer_1”xmlns=“http://www.jb51.net/2000/svg”xmlns:xlink=“http://www..jb51.net/1999/xlink”x=“0px”y=“0px”視圖框=“00458337”enable-background=“new00458337”xml:space=“preserve”><gid=“left-arm”><g><路徑fill=“#FDBF88”d=“M264,216.2l2.5,3.6c1.4,2.1,4.6,3.5,7.1,3.1l15.6-2.2c2.5-0.4,5.5-2.4,6.7-4.6l0.8-1.4c1.2-2.2,1-5.7-0.4-7.7l-5.2-7.5C285.8,208.8,274.7,214.1,264,216.2z“/><pathfill=”#FDB473“d=”M282.9,208.4l8.3,7.8c1.4,2.1,3.6,1.9,4.8-0.3l0.7-1.3c1.2-2.2,1-5.7-0.4-7.7l-4.4-8.9C289.8,202.2,286.7,205.6,282.9,208。4z“/></g><g>
 
    <pathfill=“#262626”d=“M291.1,199.4l-20.2-29.1c-1.4-2.1-4.6-3.5-7.1-3.1l-15.7,2.2c-2.5,0.4-5.5,2.4-6.7,4.6l-0.7,1.4c-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“/><pathd=”M287.8,189.9l-16.8-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.8l1,1c3.8-2.7,6.9-6.2,8.9-10.3L287.8,189.9z“/><pathfill=”#7F7F7F“stroke=”#000000“stroke-width=”0.9111“d=”M263.8,167.2c2.5-0.4,3.5,1.2,2.3,3.4l-0.8,1.4c-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.3l0.8-1.4c1.2-2.2,4.2-4.3,6.7-4.6L263.8,167.2z“/></g></g><gid=”左腿“>
 
    <pathfill=“#262626”stroke=“#000000”stroke-width=“0.9111”d=“M283.7,246c1.3-2.1,1.4-5.6,0.1-7.7L265.4,208c-1.3-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.8l18.3,30.2c1.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“/><pathfill=”#BFBFBF“stroke=”#000000“描邊-width=“0.9111”d=“M232.5,224.3l-6.1-2.5c-1.3,2.1-1.4,5.6-0.1,7.8L232.5,224.3z”/><pathd=“M283.7,238.2c1.3,2.1,1.3、5.6-0.1、7.8l-7.3、11.6c-1.3、2.1-3.5、2.1-4.8、0l-18.3-30.2c-1.3-2.1-1.3-5.6、0.1-7.8l7.3-11.6c1。3-2.1,3.5-2.1,4.8,0L283.7,238.2z“/><pathfill=”#4D4D4D“d=”M244.7,259.8c1。3,2.1,4.4,3.7,6.9,3.5l17.7-1.4c2.5-0.2,3.5-2.1,2.2-4.3l-18.3-30.2
 
    c-1.3-2.1-4.4-3.7-6.9-3.5l-17.7,1.4c-2.5,0.2-3.5,2.1-2.2,4.3L244.7,259.8z“/><pathfill=”#000“stroke=”#000000“筆觸寬度=”0.9111“d=”M258.5,204.5c2.5-0.2,3.4,1.4,2.1,3.5l-7.4,11.7c-1.3,2.1-4.5,4-7,4.2l-17.8,1.5c-2.5,0.2-3.4-1.4-2.1-3.5l7.4-11.7c1.3-2.1,4.5-4,7-4.2L258.5,204.5z“/></g><gid=”right-leg“><pathfill=”#262626“stroke=”#000000“stroke-width=”0.9111“d=”M222.5,272.1c2.5-0.2,5.3-2.2,6.3-4.6l13.3-32.8c0。9-2.3,0.4-5.8-1.3-7.6l-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.3,4.6L188.1,249c-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“/>
 
    <pathfill=“#BFBFBF”stroke=“#000000”stroke-width=“0.9111”d=“M209.3,218.1l-1.6-6.4c-2.5,0.2-5.3,2.3-6.3,4.6L209.3,218.1z”/><pathd=“M228.7,267.5c-0.9,2.3-3.8,4.4-6.3,4.6l-13.7,1.1c-2.5,0.2-3.8-1.5-2.8-3.9l13.3-32.8c0.9-2.3,3.8-4.4,6.3-4.6l13.7-1.1c2.5-0.2,3.8,1.5,2.8,3.9L228.7,267.5z“/><pathfill=”#4D4D4D“d=”M188.1,249c-0.9,2.3-0.4,5.8,1.3,7.6l11.7,13.4c1.7,1.9,3.8,1.5,4.7-0.8l13.3-32.8c0.9-2.3,0.4-5.8-1.3-7.6l-11.7-13.4c-1.7-1.9-3.8-1.5-4.7,0.8L188.1,249z“/><pathfill=”#000“stroke=”#000000“stroke-width=”0.9111“d=”M240.8,227.1c1.7,1.9,1,3.6-1.5,3.8l-13.8,1.1c-2.5,0.2-5.9-1.2-7.5-3.1l-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“/></g>
 
    <gid=“torso”><pathfill=“#262626”stroke=“#000000”stroke-width=“0.9111”d=“M270.8,217.6c2.2-1.1,4.1-4.1,4.1-6.6l0-35.4c0-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,178.2c-2.2,1.1-4.1,4.1-4.1,6.6v35.3c0,2.5,1.8,5.5,4.1,6.6l23.2,11.6c2.2,1.1,5.9,1.1,8.1,0L270.8,217.6z“/><pathfill=”#BFBFBF“stroke=”#000000“stroke-width=“0.9111”d=“M201.9,183.5l-3.9-5.3c-2.2,1.1-4.1,4.1-4.1,6.6L201.9,183.5z”/><pathd=“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.7c2.2-1.1,4.1,0,4.1,2.5V211z“/><pathfill=”#4D4D4D“stroke=“#000000”stroke-width=“0.9111”d=“M193.9,220.2c0,2.5,1.8,5.5,4.1,6.6l23.2,11.6
 
    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“/><路徑fill=“#7F7F7F”stroke=“#000000”stroke-width=“0.9111”d=“M270.8,169.1c2.2,1.1,2.2,3,0,4.1l-41.5,20.8c-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.8,169.1z“/></g><gid=“right-arm”><g><pathfill=“#FDBF88”stroke=“#000000”stroke-width=“0.9111”d=“M201.8,237l2.6,7.5c0.8,2.4,3.5,4.6,6,4.9l15.6,2.1c2.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“/><路徑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“/><pathfill=”#FECB9D“d=”M204.4,244.5c0.8,2.4,3.5,4.6,6,4.9l15.6,2.1c2.5,0.3,3.8-1.3,3-3.7l-5.4-9.2c-7.6,1.7-16.2-0.4-24.4-2.1L204.4,244.5z“/></g><g><pathfill=”#262626“stroke=“#000000”筆劃寬度=“0.9111”d=“M234.1,232.9l-12-34.8c-0.8-2.4-3.5-4.6-6-4.9l-15.7-2.1c-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,241.7,234.1,232.9z“/><pathfill=”#BFBFBF“筆畫=“#000000”stroke-width=“0.9111”d=“M194.2,201.5l-2.6-6.6c-1.7,1.8-2.5,5.2-1.7,7.6L194.2,201.5z”/><pathd=“M234.1,232.9l-12-34.8c-0.8-2.4-2.9-2.8-4.7-1l-1,1.1c-1.8,1.8-2.5,5.2-1.7,7.6l8,31.1l1.1,1.8
 
    C227.5,237.7,231,236,234.1,232.9z“/><pathfill=”#4D4D4D“d=”M214.5,205.7c-0.8-2.4-3.5-4.6-6-4.9l-15.6-2.1c-2.5-0.3-3.8,1.3-3,3.7l8.5,32.6l0.9,1.4c8.2,1.7,16.8,3.8,24.4,2.1l-1.1-1.8L214.5,205.7z“/><pathfill=”#7F7F7F“筆畫=“#000000”stroke-width=“0.9111”d=“M216,193.2c2.5,0.3,3.1,2.1,1.3,3.9l-1.1,1.1c-1.8,1.8-5.2,3-7.7,2.7l-15.7-2.1c-2.5-0.3-3.1-2.1-1.3-3.9l1.1-1.1c1.8-1.8,5.2-3,7.7-2.7L216,193.2z“/></g></g><gid=“head”><gid=“sub-head”><g><路徑填充=“#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.2l46.4,23.2c4.5,2.2,11.8,2.2,16.3,0L288.6,197.1z“/><pathfill=”#FEECDC“stroke=”#000000“stroke-width=”0.9111“d=”M187.1,128.8l-7.8-10.5c-4.5,2.3-8.1,8.2-8.1,13.2L187.1,128.8z“/><pathfill=”#FDB473“d=”M296.7,183.9c0,5-3.7,10.9-8.1,13.2l-46.4,23.2c-4.5,2.2-8.1,0-8.1-5v-52.5c0-5,3.7-10.9,8.1-13.2l46.4-23.2c4.5-2.2,8.1,0,8.1,5V183.9z“/><pathfill=”#FECB9D“d=”M171.1,183.9c0,5,3.7,10.9,8.1,13.2l46.4,23.2c4.5,2.2,8.1,0,8.1-5v-52.5c0-5-3.7-10.9-8.1-13.2l-46.4-23.2c-4.5-2.2-8.1,0-8.1,5V183。9z“/>
 
    <pathfill=“#FED9B9”d=“M288.6,118.2c4.5,2.2,4.5,5.9,0,8.1L242,149.6c-4.5,2.2-11.8,2.2-16.3,0l-46.6-23.3c-4.5-2.2-4.5-5.9,0-8.1l46.6-23.3c4.5-2.2,11.8-2.2,16.3,0L288.6,118.2z“/></g><lineid=”right-eyebrow“fill=”#4D4D4D“stroke=”#000000“stroke-width=”1.8222“x1=”243.3“y1=”180.6“x2=”266.4“y2=”181.7“/><lineid=”左眉“fill=”#4D4D4D“stroke=”#000000“stroke-width=”1.8222“x1=”272.4“y1=”177.4“x2=”288.4“y2=”164.6“/><圓圈id=“左眼”stroke=“#000000”stroke-width=“0.9111”cx=“283.6”cy=“176.5”r=“3.8”/>
 
    <circleid=“右眼”stroke=“#000000”stroke-width=“0.9111”cx=“257.5”cy=“186.9”r=“3.8”/></g><gid=“hair”><polygonfill=“#FFCCCE”stroke=“#000000”stroke-width=“0.9111”points=“204.7,103.9185.6,93.4204.8,85.9223.9,95.7”/><polygonfill=“#FF999E”stroke=“#000000”stroke-width=“0.9111”points=“215.7,102.7191.3,77.7211,70.6235.1,94.3”/><polygonfill=“#FE666D”stroke=“#000000”stroke-width=“0.9111”points=“227.5,102.7201.1,67221.1,60.1247,94“/><polygonfill=”#FE333D“stroke=”#000000“stroke-width=”0.9111“points=”241.3,104223.4,55.6243.9,48.7261,94.9“/>
 
    <polygonfill=“#FE000C”points=“257,143.2244.4,84.3264.4,75.9275.9,132.3”/><polygonfill=“#FE4D55”points=“194.6,110.7257,143.2257,143.2244.4,84.3244.4,84.3241.3,104241.3,104223.4,55.6223.4,55.6227.5,102.7227.5,102.7201.1,67201.1,67215.7,102.7215.7,102.7191.3,77.7191.3,77.7204.7,103.9204.7,103.9185.6,93.4185.6,93.4“/></g></g><radialgradientid=“SVGID_1_”cx=“239.975”cy=“271.2543”r=“122.4974”gradienttransform=“matrix(1000.25410202.3306)”gradientunits=“userSpaceOnUse”><停止偏移=“0”style=“stop-color:#231F20;stop-opacity:0.3”/>
 
    <stopoffset=“1”style=“stop-color:#231F20;stop-opacity:0”/></radialgradient><橢圓填充=“url(#SVGID_1_)”cx=“240”cy=“271.3”rx=“122.5”ry=“31.1”/></svg>

    css3代碼:

    html{-moz-box-sizing:border-box;框大小:border-box;}*,*:之前,*:之后{-moz-box-sizing:繼承;大小調整:繼承;}</p><p>html,body{高度:100%;邊距:0;字體:40px/40px“HelveticaNeue”;字體粗細:900;顏色:rgba(255,255,255,1);-webkit-font-smoothing:抗鋸齒;字體平滑:抗鋸齒;}</p><p>svg{寬度:100%;高度:100%;}</p><p>#left-eye{-webkit-transform-origin:283px176px;-ms-transform-origin:283px176px;transform-origin:283px176px;
 
    /*動畫:脈沖2s線性無限;*/}#head{-webkit-transform-origin:235px173px;-ms-transform-origin:235px173px;transform-origin:235px173px;-webkit-animation:head2s緩入無限;動畫:頭部2s緩入無限;}</p><p>#right-eyebrow,#left-eyebrow{-webkit-animation:眉毛10s線性無窮;動畫:眉毛10s線性無限;}</p><p>#left-leg{-webkit-transform-origin:253px225px;-ms-transform-origin:253px225px;transform-origin:253px225px;-webkit-animation:左腿2s緩入無限;
 
    動畫:leftleg2s緩入無限;}</p><p>#right-leg{-webkit-transform-origin:225px235px;-ms-transform-origin:225px235px;transform-origin:225px235px;-webkit-animation:rightleg2s緩入無限;動畫:rightleg2s緩入無限;}#left-arm{-webkit-transform-origin:263px186px;-ms-transform-origin:263px186px;transform-origin:263px186px;-webkit-animation:左臂2s緩入無限;動畫:左臂2s緩入無限;}</p><p>#right-arm{-webkit-transform-origin:209px214px;
 
    -ms-transform-origin:209px214px;transform-origin:209px214px;-webkit-animation:右臂2s緩入無限;動畫:右臂2s緩入無限;}#hair{-webkit-filter:hue-rotate(45deg);濾鏡:色相-旋轉(45度);/*izza不工作!*/}</p><p>@-webkit-keyframesleftleg{0%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}50%{-webkit-transform:旋轉(55deg);變換:rotate(55deg);}100%{-webkit-transform:旋轉(0deg);
 
    變換:rotate(0deg);}}</p><p>@keyframesleftleg{0%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}50%{-webkit-transform:旋轉(55deg);變換:rotate(55deg);}100%{-webkit-transform:旋轉(0deg);變換:rotate(0deg);}}</p><p>@-webkit-keyframesrightleg{0%{-webkit-transform:rotation(25deg);變換:rotate(25deg);}50%{-webkit-transform:旋轉(-40deg);
 
    變換:rotate(-40deg);}100%{-webkit-transform:旋轉(25deg);變換:rotate(25deg);}}</p><p>@keyframesrightleg{0%{-webkit-transform:rotation(25deg);變換:rotate(25deg);}50%{-webkit-transform:旋轉(-40deg);變換:rotate(-40deg);}100%{-webkit-transform:旋轉(25deg);變換:rotate(25deg);}}</p><p>@-webkit-keyframes右臂{0%{-webkit-transform:rotation(0deg);
 
    變換:rotate(0deg);}50%{-webkit-transform:旋轉(40deg);變換:rotate(40deg);}100%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}}</p><p>@keyframes右臂{0%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}50%{-webkit-transform:旋轉(40deg);變換:rotate(40deg);}100%{-webkit-transform:旋轉(0deg);變換:rotate(0deg);}
 
    }</p><p>@-webkit-keyframes左臂{0%{-webkit-transform:rotation(50deg);變換:rotate(50deg);}50%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}100%{-webkit-transform:旋轉(50deg);變換:rotate(50deg);}}</p><p>@keyframes左臂{0%{-webkit-transform:rotation(50deg);變換:rotate(50deg);}50%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}100%{
 
    -webkit-transform:旋轉(50deg);變換:rotate(50deg);}}</p><p>@-webkit-keyframes頭{0%{-webkit-transform:rotation(0deg);變換:rotate(0deg);}50%{-webkit-transform:旋轉(-5deg);變換:rotate(-5deg);}100%{-webkit-transform:旋轉(0deg);變換:rotate(0deg);}}</p><p>@keyframes頭{0%{-webkit-transform:旋轉(0deg);變換:rotate(0deg);}50%{
 
    -webkit-transform:旋轉(-5deg);變換:rotate(-5deg);}100%{-webkit-transform:旋轉(0deg);變換:rotate(0deg);}}</p><p>@-webkit-keyframespulse{0%{-webkit-transform:scale(1);轉換:scale(1);}50%{-webkit-transform:scale(1.1);轉換:scale(1.1);}100%{-webkit-transform:scale(1);轉換:scale(1);}}</p><p>@關鍵幀脈沖{0%{
 
    -webkit-transform:scale(1);轉換:scale(1);}50%{-webkit-transform:scale(1.1);轉換:scale(1.1);}100%{-webkit-transform:scale(1);轉換:scale(1);}}</p><p>@-webkit-keyframes眉毛{0%{}98%{-webkit-transform:translate(0,0px);轉換:translate(0,0px);}99%{-webkit-transform:translate(0,-5px);轉換:translate(0,-5px);}100%{
 
    -webkit-transform:translate(0,0px);轉換:translate(0,0px);}}</p><p>@keyframes眉毛{0%{}98%{-webkit-transform:translate(0,0px);轉換:translate(0,0px);}99%{-webkit-transform:translate(0,-5px);轉換:translate(0,-5px);}100%{-webkit-transform:translate(0,0px);轉換:translate(0,0px);}}

以上是“如何使用html5和css3實現的小機器人走路動畫”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

乐陵市| 左权县| 连江县| 盐边县| 板桥市| 阆中市| 大田县| 银川市| 安乡县| 通化市| 江西省| 新宾| 白城市| 清河县| 邹城市| 澎湖县| 凤台县| 漯河市| 德兴市| 民县| 平阴县| 静安区| 房产| 房山区| 景泰县| 高陵县| 邹平县| 枝江市| 五台县| 同仁县| 威海市| 灵丘县| 茂名市| 连南| 鱼台县| 神池县| 渑池县| 长白| 梨树县| 潼南县| 英吉沙县|