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

This article introduces the relevant knowledge of "using CSS3 to realize the example code of character walking animation". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The effect is as follows:

HTML code

XML/HTML Code copies content to the clipboard

Basic CSS code

CSS Code copies content to the clipboard

# canvas {

Height: 600px

Width: 760px

Margin: 0

Padding: 0

Position: relative

Overflow: hidden

}

# canvas div {

Position: absolute

-webkit-animation-iteration-count: infinite

-moz-animation-iteration-count: infinite

-ms-animation-iteration-count: infinite

-o-animation-iteration-count: infinite

Animation-iteration-count: infinite

-webkit-animation-timing-function: linear

-moz-animation-timing-function: linear

-ms-animation-timing-function: linear

-o-animation-timing-function: linear

Animation-timing-function: linear

}

# canvas:target div:not (.overlay) {

Border: 1px solid black

}

# canvas:target div.me div {

Background: rgba (255,255,255,0.25)

}

.me {

Top: 50px; left: 350px

-webkit-animation-name: me

-moz-animation-name: me

-ms-animation-name: me

-o-animation-name: me

Animation-name: me

}

.me, .me div {

Background-repeat: no-repeat

-webkit-animation-duration: 1750ms

-moz-animation-duration: 1750ms

-ms-animation-duration: 1750ms

-o-animation-duration: 1750ms

Animation-duration: 1750ms

}

.torso {

Width: 86px; height: 275px

Background-image: url (images/me/torso.png)

}

.arm {

Left: 12px

-webkit-transform-origin: 20px 10px

-moz-transform-origin: 20px 10px

-ms-transform-origin: 20px 10px

-o-transform-origin: 20px 10px

Transform-origin: 20px 10px

}

.rightright.arm {

Top: 93px

-webkit-animation-name: rightright-bicep

-moz-animation-name: rightright-bicep

-ms-animation-name: rightright-bicep

-o-animation-name: rightright-bicep

Animation-name: rightright-bicep

}

.left.arm {

Top: 87px

-webkit-animation-name: left-bicep

-moz-animation-name: left-bicep

-ms-animation-name: left-bicep

-o-animation-name: left-bicep

Animation-name: left-bicep

}

.bicep {

Height: 124px; width: 51px

}

.rightright.bicep {background-image: url (images/me/rightright-bicep.png);}

.left.bicep {background-image: url (images/me/left-bicep.png);}

.forearm {

Top: 108px; left: 14px

Width: 36px; height: 121px

-webkit-transform-origin: 3px 7px

-moz-transform-origin: 3px 7px

-ms-transform-origin: 3px 7px

-o-transform-origin: 3px 7px

Transform-origin: 3px 7px

}

.rightright.forearm {

Background-image: url (images/me/rightright-forearm.png)

-webkit-animation-name: rightright-forearm

-moz-animation-name: rightright-forearm

-ms-animation-name: rightright-forearm

-o-animation-name: rightright-forearm

Animation-name: rightright-forearm

}

.left.forearm {

Background-image: url (images/me/left-forearm.png)

-webkit-animation-name: left-forearm

-moz-animation-name: left-forearm

-ms-animation-name: left-forearm

-o-animation-name: left-forearm

Animation-name: left-forearm

}

.leg {

Left: 6px

-webkit-transform-origin: 30px 20px

-moz-transform-origin: 30px 20px

-ms-transform-origin: 30px 20px

-o-transform-origin: 30px 20px

Transform-origin: 30px 20px

-webkit-animation-name: thigh

-moz-animation-name: thigh

-ms-animation-name: thigh

-o-animation-name: thigh

Animation-name: thigh

}

.rightright.leg {

Top: 235px

-webkit-animation-name: rightright-thigh

-moz-animation-name: rightright-thigh

-ms-animation-name: rightright-thigh

-o-animation-name: rightright-thigh

Animation-name: rightright-thigh

}

.left.leg {

Top: 225px

-webkit-animation-name: left-thigh

-moz-animation-name: left-thigh

-ms-animation-name: left-thigh

-o-animation-name: left-thigh

Animation-name: left-thigh

}

.thigh {

Width: 70px; height: 145px

}

.left.thigh {background-image: url (images/me/left-thigh.png);}

.rightright.thigh {background-image: url (images/me/rightright-thigh.png);}

.shin {

Top: 115px

Width: 50px; height: 170px

Background-image: url (images/me/shin.png)

-webkit-transform-origin: 30px 25px

-moz-transform-origin: 30px 25px

-ms-transform-origin: 30px 25px

-o-transform-origin: 30px 25px

Transform-origin: 30px 25px

}

.rightright.shin {

-webkit-animation-name: rightright-shin

-moz-animation-name: rightright-shin

-ms-animation-name: rightright-shin

-o-animation-name: rightright-shin

Animation-name: rightright-shin

}

.left.shin {

-webkit-animation-name: left-shin

-moz-animation-name: left-shin

-ms-animation-name: left-shin

-o-animation-name: left-shin

Animation-name: left-shin

}

.foot {

Top: 155px; left: 2px

Width: 67px; height: 34px

Background-image: url (images/me/foot.png)

-webkit-transform-origin: 0.50%

-moz-transform-origin: 0.50%

-ms-transform-origin: 0.50%

-o-transform-origin: 0.50%

Transform-origin: 0.50%

}

.rightright.foot {

-webkit-animation-name: rightright-foot

-moz-animation-name: rightright-foot

-ms-animation-name: rightright-foot

-o-animation-name: rightright-foot

Animation-name: rightright-foot

}

.left.foot {

-webkit-animation-name: left-foot

-moz-animation-name: left-foot

-ms-animation-name: left-foot

-o-animation-name: left-foot

Animation-name: left-foot

}

.toes {

Top: 9px; left: 66px

Width: 28px; height: 25px

Background-image: url (images/me/toes.png)

-webkit-transform-origin: 0% 100%

-moz-transform-origin: 0% 100%

-ms-transform-origin: 0% 100%

-o-transform-origin: 0% 100%

Transform-origin: 0% 100%

}

.rightright.toes {

-webkit-animation-name: rightright-toes

-moz-animation-name: rightright-toes

-ms-animation-name: rightright-toes

-o-animation-name: rightright-toes

Animation-name: rightright-toes

}

.left.toes {

-webkit-animation-name: left-toes

-moz-animation-name: left-toes

-ms-animation-name: left-toes

-o-animation-name: left-toes

Animation-name: left-toes

}

.shadow {

Width: 200px; height: 70px

Left: 270px; bottombottom: 5px

Background-image: url (images/misc/shadow.png)

-webkit-animation-name: shadow

-moz-animation-name: shadow

-ms-animation-name: shadow

-o-animation-name: shadow

Animation-name: shadow

}

/ * setting proper z-indexes so that limbs show up correctly * /

Div.rightright.arm {z-index: 1;}

Div.left.arm {z-index:-3;}

Div.arm > div.bicep > div.forearm {z-index:-1;}

Div.rightright.leg {z-index:-1;}

Div.left.leg {z-index:-2;}

Div.leg > div.thigh > div.shin {z-index:-1;}

.overlay {

Width: 100%; height: 100%

Background: url (images/misc/gradient-left.png) repeat-y top left

Url (images/misc/gradient-rightright.png) repeat-y top rightright

}

.sky div {

Background-repeat: no-repeat

-webkit-animation-name: prop-1200

-moz-animation-name: prop-1200

-ms-animation-name: prop-1200

-o-animation-name: prop-1200

Animation-name: prop-1200

}

.cloud-1, .cloud-2 {

Width: 82px; height: 90px

Background-image: url (images/clouds/1.png)

-webkit-animation-duration: 120s

-moz-animation-duration: 120s

-ms-animation-duration: 120s

-o-animation-duration: 120s

Animation-duration: 120s

}

.cloud-3, .cloud-4 {

Top: 70px

Width: 159px; height: 90px

Background-image: url (images/clouds/2.png)

-webkit-animation-duration: 80s

-moz-animation-duration: 80s

-ms-animation-duration: 80s

-o-animation-duration: 80s

Animation-duration: 80s

}

.cloud-5, .cloud-6 {

Top: 30px

Width: 287px; height: 62px

Background-image: url (images/clouds/3.png)

-webkit-animation-duration: 140s

-moz-animation-duration: 140s

-ms-animation-duration: 140s

-o-animation-duration: 140s

Animation-duration: 140s

}

.cloud-7, .cloud-8 {

Top: 100px

Width: 94px; height: 81px

Background-image: url (images/clouds/4.png)

-webkit-animation-duration: 90s

-moz-animation-duration: 90s

-ms-animation-duration: 90s

-o-animation-duration: 90s

Animation-duration: 90s

}

.cloud-1 {left: 0px;}

.cloud-2 {left: 1200px;}

.cloud-3 {left: 250px;}

.cloud-4 {left: 1450px;}

.cloud-5 {left: 500px;}

.cloud-6 {left: 1700px;}

.cloud-7 {left: 950px;}

.cloud-8 {left: 2150px;}

.horizon {

Top: 350px

Width: 1800px; height: 50px

Background: url (images/misc/horizon.png) repeat-x

-webkit-animation-name: prop-600

-moz-animation-name: prop-600

-ms-animation-name: prop-600

-o-animation-name: prop-600

Animation-name: prop-600

-webkit-animation-duration: 40s

-moz-animation-duration: 40s

-ms-animation-duration: 40s

-o-animation-duration: 40s

Animation-duration: 40s

}

.ground div {

Background-repeat: no-repeat

-webkit-animation-name: prop-2000

-moz-animation-name: prop-2000

-ms-animation-name: prop-2000

-o-animation-name: prop-2000

Animation-name: prop-2000

}

.sign-all-css {

Width: 160px; height: 188px

Top: 325px; left: 1600px

Background-image: url (images/signs/all-css.png)

-webkit-animation-duration: 35s

-moz-animation-duration: 35s

-ms-animation-duration: 35s

-o-animation-duration: 35s

Animation-duration: 35s

}

.sign-lots-of-divs {

Width: 102px; height: 120px

Top: 345px; left: 1150px

Background-image: url (images/signs/lots-of-divs.png)

-webkit-animation-duration: 56s

-moz-animation-duration: 56s

-ms-animation-duration: 56s

-o-animation-duration: 56s

Animation-duration: 56s

}

.sign-no-js {

Width: 65px; height: 77px

Top: 348px; left: 1150px

Background-image: url (images/signs/no-js.png)

-webkit-animation-duration: 71s

-moz-animation-duration: 71s

-ms-animation-duration: 71s

-o-animation-duration: 71s

Animation-duration: 71s

}

. sign-best {

Width: 43px; height: 50px

Top: 350px; left: 1000px

Background-image: url (images/signs/best.png)

-webkit-animation-duration: 95s

-moz-animation-duration: 95s

-ms-animation-duration: 95s

-o-animation-duration: 95s

Animation-duration: 95s

}

CSS Animation related Code

CSS Code copies content to the clipboard

@-webkit-keyframes me {

0% {- webkit-transform: rotate (5deg) translate (5px, 0px);}

25% {- webkit-transform: rotate (5deg) translate (- 5px,-14px);}

50% {- webkit-transform: rotate (5deg) translate (5px, 0px);}

75% {- webkit-transform: rotate (5deg) translate (- 5px,-14px);}

{- webkit-transform: rotate (5deg) translate (5px, 0px);}

}

@-webkit-keyframes rightright-bicep {

0% {- webkit-transform: rotate (26deg);}

50% {- webkit-transform: rotate (- 20deg);}

100% {- webkit-transform: rotate (26deg);}

}

@-webkit-keyframes left-bicep {

0% {- webkit-transform: rotate (- 20deg);}

50% {- webkit-transform: rotate (26deg);}

{- webkit-transform: rotate (- 20deg);}

}

@-webkit-keyframes rightright-forearm {

0% {- webkit-transform: rotate (- 10deg);}

50% {- webkit-transform: rotate (- 45deg);}

{- webkit-transform: rotate (- 10deg);}

}

@-webkit-keyframes left-forearm {

0% {- webkit-transform: rotate (- 45deg);}

50% {- webkit-transform: rotate (- 10deg);}

{- webkit-transform: rotate (- 45deg);}

}

@-webkit-keyframes rightright-thigh {

0% {- webkit-transform: rotate (- 45deg);}

50% {- webkit-transform: rotate (10deg);}

{- webkit-transform: rotate (- 45deg);}

}

@-webkit-keyframes left-thigh {

0% {- webkit-transform: rotate (10deg);}

50% {- webkit-transform: rotate (- 45deg);}

100% {- webkit-transform: rotate (10deg);}

}

@-webkit-keyframes rightright-shin {

0% {- webkit-transform: rotate (30deg);}

25% {- webkit-transform: rotate (20deg);}

50% {- webkit-transform: rotate (20deg);}

75 {- webkit-transform: rotate (85deg);}

100% {- webkit-transform: rotate (30deg);}

}

@-webkit-keyframes left-shin {

0% {- webkit-transform: rotate (20deg);}

25% {- webkit-transform: rotate (85deg);}

50% {- webkit-transform: rotate (30deg);}

75 {- webkit-transform: rotate (20deg);}

100% {- webkit-transform: rotate (20deg);}

}

@-webkit-keyframes rightright-foot {

0% {- webkit-transform: rotate (- 5deg);}

25% {- webkit-transform: rotate (- 7deg);}

50% {- webkit-transform: rotate (- 16deg);}

75 {- webkit-transform: rotate (- 10deg);}

{- webkit-transform: rotate (- 5deg);}

}

@-webkit-keyframes left-foot {

0% {- webkit-transform: rotate (- 16deg);}

25% {- webkit-transform: rotate (- 10deg);}

50% {- webkit-transform: rotate (- 5deg);}

75 {- webkit-transform: rotate (- 7deg);}

{- webkit-transform: rotate (- 16deg);}

}

@-webkit-keyframes rightright-toes {

0% {- webkit-transform: rotate (0deg);}

25% {- webkit-transform: rotate (- 10deg);}

50% {- webkit-transform: rotate (- 10deg);}

75 {- webkit-transform: rotate (- 25deg);}

100% {- webkit-transform: rotate (0deg);}

}

@-webkit-keyframes left-toes {

0% {- webkit-transform: rotate (- 10deg);}

25% {- webkit-transform: rotate (- 25deg);}

50% {- webkit-transform: rotate (0deg);}

75 {- webkit-transform: rotate (- 10deg);}

{- webkit-transform: rotate (- 10deg);}

}

@-webkit-keyframes shadow {

0% {opacity: 1;}

25% {opacity: 0.75;}

50% {opacity: 1;}

75% {opacity: 0.75;}

100% {opacity: 1;}

}

@-webkit-keyframes prop-600 {

0% {- webkit-transform: translateX (0px);}

{- webkit-transform: translateX (- 600px);}

}

@-webkit-keyframes prop-1200 {

0% {- webkit-transform: translateX (0px);}

{- webkit-transform: translateX (- 1200px);}

}

@-webkit-keyframes prop-2000 {

0% {- webkit-transform: translateX (0px);}

{- webkit-transform: translateX (- 2000px);}

}

"using CSS3 to achieve character walking animation example code" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.