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

This article mainly shows you "how to use pure CSS to achieve a rotating bicycle wheel animation effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure CSS to achieve the animation effect of a rotating bicycle wheel" this article.

Code interpretation

Define dom. The container contains 6 elements:

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-image:linear-gradient (# 555)

}

Draw the rims:

.wheel {

Width:9em

Height:9em

Font-size:25px

Border:0.4emsolid#777

Border-radius:50%

Box-shadow:0000.5em#111

}

Define the style of the spokes:

.wheel {

Display:flex

Align-items:center

Justify-content:center

}

.wheelspan {

Position:absolute

Width:8em

Height:1em

Border:0.1emsolid

Border-color:#ccctransparent

}

Define variables and draw multiple strips:

.wheelspan {

Transform:rotate (calc ((var (--n)-1) * 30deg))

}

.wheelspan:nth-child (1) {

-- nRO 1

}

.wheelspan:nth-child (2) {

-- nRO 2

}

.wheelspan:nth-child (3) {

-- nRO 3

}

.wheelspan:nth-child (4) {

-- nRO 4

}

.wheelspan:nth-child (5) {

-- nRO 5

}

.wheelspan:nth-child (6) {

-- nRO 6

}

To turn the wheel:

.wheelspan {

Animation:run4slinearinfinite

}

@ keyframesrun {

To {

Transform:rotate (calc ((var (--n)-1) * 30deg+360deg))

}

}

To draw lines on the ground with pseudo elements:

.wheel {

Position:relative

}

.wheel:: before {

Content:''

Position:absolute

Width:15em

Height:0.2em

Top:11em

Background-image:linear-gradient (

Toright

Silver0,silver4em

Transparent4em,transparent5em

Silver5em,silver10em

Transparent10em,transparent12em

Silver12em,silver14em

Transparent14em,transparent15em

)

}

Finally, let the lines on the ground move to create the effect of the wheels moving forward:

.wheel:: before {

Background-position:15em

Animation:run26slinearinfinite

}

@ keyframesrun2 {

To {

Background-position:-15em

}

}

The above is "how to use pure CSS to achieve the animation effect of a rotating bicycle wheel" all the content of this article, thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.