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怎么实现游戏角色行走”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！