How to animate a rotating bicycle wheel using pure CSS-CSS Tutorial-php.cn

How to animate a rotating bicycle wheel using pure CSS

不言

Release： 2018-09-04 11:11:38

Original

3675 people have browsed it

The content of this article is about how to use pure CSS to realize the animation effect of a rotating bicycle wheel. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

Effect preview

How to animate a rotating bicycle wheel using pure CSS

Source code download

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

Code Interpretation

Define dom, the container contains 6 elements:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(#555, #222);
}

Copy after login

Draw the wheel circle:

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

Copy after login

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;
}

Copy after login

Define variables and draw multiple spokes:

.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;
}

Copy after login

Let the wheel rotate:

.wheel span {
    animation: run 4s linear infinite;
}

@keyframes run {
    to {
        transform: rotate(calc((var(--n) - 1) * 30deg + 360deg));
    }
}

Copy after login

Draw with pseudo elements Draw the 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
        );
}

Copy after login

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

.wheel::before {
    background-position: 15em;
    animation: run2 6s linear infinite;
}
@keyframes run2 {
    to {
        background-position: -15em;
    }
}

Copy after login

Done!

Related recommendations:

How to use pure CSS to achieve the button hover effect of the ball changing into a rectangular background (source code attached)

How to Use pure CSS to implement a paper crane (with source code)

How to use CSS and D3 to implement interactive animation of small fish swimming (with code)

The above is the detailed content of How to animate a rotating bicycle wheel using pure CSS. For more information, please follow other related articles on the PHP Chinese website!