How to use pure CSS to realize the animated effect of a rotating bicycle wheel

This article brings you the content is about how to use the pure CSS to achieve a rotating bicycle wheel animation effect, there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

To define the DOM, the container contains 6 elements:

<div class= "Wheel" >    <span></span>    <span></span>    <span></span >    <span></span>    <span></span>    <span></span></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-image:linear-gradient (#555, #222);}

Draw the rim:

. wheel {    width:9em;    Height:9em;    font-size:25px;    Border:0.4em solid #777;    border-radius:50%;    box-shadow:0 0 0 0.5em #111;}

Define the style of the spokes:

. wheel {    Display:flex;    Align-items:center;    Justify-content:center;}. Wheel span {    position:absolute;    Width:8em;    Height:1em;    Border:0.1em solid;    Border-color: #ccc Transparent;}

Define variables and draw multiple bars:

. Wheel span {    transform:rotate (Calc ((Var (--n)-1) * 30deg);}. Wheel Span:nth-child (1) {    --n:1;}. Wheel Span:nth-child (2) {    --n:2;}. Wheel Span:nth-child (3) {    --n:3;}. Wheel Span:nth-child (4) {    --n:4;}. Wheel Span:nth-child (5) {    --n:5;}. Wheel Span:nth-child (6) {    --n:6;}

To make the wheels spin up:

. Wheel span {    animation:run 4s linear infinite;} @keyframes Run {to    {        transform:rotate ((Var (--n)-1) * 30deg + 360deg);}    }

Use pseudo-elements to draw lines on the ground:

. wheel {    position:relative;}. Wheel::before {    content: ';    Position:absolute;    width:15em;    Height:0.2em;    Top:11em;    Background-image:linear-gradient (to            -right,            silver 0, Silver 4em,            transparent 4em, transparent 5em,            Silver 5em, silver 10em,            transparent 10em, transparent 12em,            silver 12em, silver 14em,            Transparent 14em, transparent 15em        );}

Finally, let the lines on the ground move up, forming the effect of the wheel going forward:

. wheel::before {    background-position:15em;    ANIMATION:RUN2 6s linear Infinite;} @keyframes run2 {to    {        background-position: -15em;    }}

Done!