这篇文章主要介绍“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怎么实现游戏角色行走”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
