html5怎么實現游戲角色行走

這篇文章主要介紹“html5怎么實現游戲角色行走”，在日常操作中，相信很多人在html5怎么實現游戲角色行走問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html5怎么實現游戲角色行走”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　復制代碼代碼如下:

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

　　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 {

　　-moz-box-sizing: border-box;

　　box-sizing: border-box;

　　}

　　*, *:before, *:after {

　　-moz-box-sizing: inherit;

　　box-sizing: inherit;

　　}

　　html,body {

　　height:100%;

　　margin: 0;

　　font: 40px/40px "Helvetica Neue";

　　font-weight: 900;

　　color: rgba(255, 255, 255, 1);

　　-webkit-font-smoothing: antialiased;

　　font-smoothing: antialiased;

　　}

　　svg {

　　width: 100%;

　　height: 100%;

　　}

　　#left-eye {

　　-webkit-transform-origin: 283px 176px;

　　-ms-transform-origin: 283px 176px;

　　transform-origin: 283px 176px;

　　}

　　#head {

　　-webkit-transform-origin: 235px 173px;

　　-ms-transform-origin: 235px 173px;

　　transform-origin: 235px 173px;

　　-webkit-animation: head 2s ease-in-out infinite;

　　animation: head 2s ease-in-out infinite;

　　}

　　#right-eyebrow, #left-eyebrow {

　　-webkit-animation: eyebrows 10s linear infinite;

　　animation: eyebrows 10s linear infinite;

　　}

　　#left-leg {

　　-webkit-transform-origin: 253px 225px;

　　-ms-transform-origin: 253px 225px;

　　transform-origin: 253px 225px;

　　-webkit-animation: leftleg 2s ease-in-out infinite;

　　animation: leftleg 2s ease-in-out infinite;

　　}

　　#right-leg {

　　-webkit-transform-origin: 225px 235px;

　　-ms-transform-origin: 225px 235px;

　　transform-origin: 225px 235px;

　　-webkit-animation: rightleg 2s ease-in-out infinite;

　　animation: rightleg 2s ease-in-out infinite;

　　}

　　#left-arm {

　　-webkit-transform-origin: 263px 186px;

　　-ms-transform-origin: 263px 186px;

　　transform-origin: 263px 186px;

　　-webkit-animation: leftarm 2s ease-in-out infinite;

　　animation: leftarm 2s ease-in-out infinite;

　　}

　　#right-arm {

　　-webkit-transform-origin: 209px 214px;

　　-ms-transform-origin: 209px 214px;

　　transform-origin: 209px 214px;

　　-webkit-animation: rightarm 2s ease-in-out infinite;

　　animation: rightarm 2s ease-in-out infinite;

　　}

　　#hair {

　　-webkit-filter: hue-rotate(45deg);

　　filter: hue-rotate(45deg);

　　}

　　@-webkit-keyframes leftleg {

　　0%{

　　-webkit-transform: rotate(0deg);

　　transform: rotate(0deg);

　　}

　　50%{

　　-webkit-transform: rotate(55deg);

　　transform: rotate(55deg);

　　}

　　100%{

　　-webkit-transform: rotate(0deg);

　　transform: rotate(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: rotate(0deg);

　　}

　　}

到此，關于“html5怎么實現游戲角色行走”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！