How to use pure CSS to realize the animation effect of a rotating bicycle wheel
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!
