Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to realize the game character walking in html5". In the daily operation, I believe that many people have doubts about how to achieve the game character walking in html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to realize the game character walking in html5". Next, please follow the editor to study!

The copy code is as follows:

X = "0px" y = "0px" viewbox= "0.0458 337" enable-background= "new 0.0458 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 Code:

The copy code is as follows:

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)

}

}

At this point, the study on "how to achieve game character walking in html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.