Comment faire tourner un cercle avec une animation CSS3-Questions et réponses frontales-php.cn

Comment faire tourner un cercle avec une animation CSS3

藏色散人

Libérer： 2023-02-01 10:54:30

original

2444 Les gens l'ont consulté

Comment faire pivoter un cercle avec une animation CSS3 : 1. Créez un nouvel exemple de fichier HTML et définissez le div comme "
" 2. Définissez différents effets via les attributs d'animation. Bordure, rotation, le code est "animation : cercle 2s linéaire infini ; @keyframes cercle {0% {transform : rotation (0deg);}".

Comment faire tourner un cercle avec une animation CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment faire pivoter un cercle avec une animation css3 ?

Effet de rotation d'anneau CSS3

1. Effet de rotation d'anneau CSS3 1

Principe : Définir des bordures avec différents effets et faire pivoter

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

Copier après la connexion

2. Css 3 sonnerie effet 2

Principe : Utiliser des bordures multicouches pour abaisser le groove et effectuer une 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>

Copier après la connexion

L'effet est le suivant :