How to make a circle rotate with css3 animation-Front-end Q&A-php.cn

How to make a circle rotate with css3 animation

藏色散人

Release： 2023-02-01 10:54:30

Original

2444 people have browsed it

How to rotate a circle with css3 animation: 1. Create a new HTML sample file and define the div as "
"; 2. Through animation attributes Set borders with different effects and perform rotation. The code is "animation: circle 2s infinite linear; @keyframes circle {0% {transform: rotate(0deg);}".

How to make a circle rotate with css3 animation

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to rotate a circle with css3 animation?

CSS3 ring rotation effect

1. CSS3 ring rotation effect 1

Principle: Set borders with different effects and rotate them

<div class="demo"></div><style>
    .demo {
        width: 250px;
        height: 250px;
        border: 50px solid red;
        border-left-color: blue;
        border-right-color: yellow;
        border-top-color: #04f105;
        margin: 100px;
        border-radius: 50%;
        animation: circle 2s infinite linear;
    }
    @keyframes circle {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-360deg);
        }
    }</style>

Copy after login

## 2. Css 3 Ring Effect 2

Principle: Use multi-layered borders to lower the groove and perform rotation

<div class="demoout">
    <div class="demo"></div></div><style>
    body {
        background: black;
    }

    .demo {
        width: 250px;
        height: 250px;
        border: 3px solid white;
        border-left-color: blue;
        border-right-color: yellow;
        margin: 25px;
        border-radius: 50%;
        animation: circle 4s infinite ease;
        background: white;
    }

    .demoout {
        width: 300px;
        height: 300px;
        border: 3px solid white;
        border-top-color: green;
        border-bottom-color: red;
        margin: 100px;
        border-radius: 50%;
        animation: circle 4s infinite linear;
        background: white;
    }

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

        100% {
            transform: rotate(-360deg);
        }
    }</style>

Copy after login

The effect is as follows:

Recommended study: "

css video tutorial"

The above is the detailed content of How to make a circle rotate with css3 animation. For more information, please follow other related articles on the PHP Chinese website!