Exemple de code pour implémenter une animation de rotation de cercle et de bordure à l'aide de CSS

Le contenu de cet article concerne des exemples de code pour réaliser des cercles et des bordures en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Effet de réussite :

Code

html:

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

css :

     #box {
        height:200px;
        width:200px;
    }

    .circle-out{
        height: inherit;
        width: inherit;

        display: inline-block;
        text-align: center;

        border: 20px solid blue;
        border-radius: 50%;
        
    }

    /* 绘制弧形 */
    .circle-part{
        display: inline-block;
        position: relative;
        width:0px;
        height: 0px;

        border-radius: 50%;
        border: 100px solid #0000ff05;
        border-top: 100px solid blue;

        top: -220px;
        left: 20px;

        transform: rotate(0deg);
        animation: run-part 5s infinite;
    }

    .part1{
        height: 0px;
        width: 0px;

        border-radius: 50%;
        border:100px solid #fafafa;
        border-top: 100px solid #ff000000;

        position: relative;
        top: -420px;
        left: 20px;

        transform: rotate(45deg);
        animation: run-part1 5s infinite;
    }

    .circle-inner{
        height: 0px;
        width: 0px;
        display: inline-block;

        border-radius: 50%;
        border: 20px solid blue;

        top: 80px;
        position: relative;
        
        z-index: 1000;
    }

    @-webkit-keyframes run-part1{
        0%{
            transform: rotate(45deg);
        }

        100% {
            transform: rotate(405deg);
        }
    }

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

        100% {
            transform: rotate(360deg);
        }
    }

Idées de mise en œuvre

1 Composition graphique

Depuis l'apparence, le graphique est grossièrement composé de : un cercle extérieur, un cercle intérieur et une forme d'éventail.

1.1 Cercle extérieur

Dans cet exemple, un p est principalement utilisé pour définir la hauteur et la largeur, et l'arrière-plan n'est pas défini ni blanc. Réglez border-radius sur 50 % du cercle extérieur et utilisez une bordure pour former le cercle extérieur.

.circle-out{
    height: inherit;
    width: inherit;
    border: 20px solid blue;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
}

Rendu  :

1.2 cercle intérieur

Le cercle intérieur est très simple. C'est aussi un cercle complété à l'aide d'une bordure. Le réglage de l'effet du cercle obtenu par boder-radius:50% est finalement une question de positionnement.

1.3 Secteur

Secteur, dans cet exemple, l'idée de mise en œuvre est aussi de reconstituer, d'ajouter une rotation et d'utiliser la bordure border pour y parvenir.

  .circle-part{
        //(1)
        display: inline-block;
        width:0px;
        height: 0px;

        //(2)
        border-radius: 50%;
        border: 100px solid #0000ff05;
        border-top: 100px solid blue;
        
        //(3)
        position: relative;
        top: -220px;
        left: 20px;

        //(4)
        transform: rotate(0deg);
        animation: run-part 5s infinite;
    }

Le code ci-dessus :
est divisé en parties (1), (2), (3) et (4) Outre les formes fixes et les animations, la partie la plus importante est (. 2) .

Dessinez d'abord le cercle (bordure) de 1/4. D'autres 3/4 secteurs sont dessinés en transparence.

Idem, utilisez un autre cercle pour le même processus, afin que les deux cercles puissent se chevaucher. La seule différence est : le deuxième cercle définit le 3/4 cercle comme blanc, 1/4 Réglez sur la couleur transparente.

À ce moment, la forme en éventail de 1/4 est présentée, l'arrière-plan est blue et 1/4 est complètement exposé en raison de la transparence.

Enfin, puisque le dernier cercle est l'élément de niveau supérieur, lorsque l'élément de niveau supérieur pivote, la partie bleue en forme d'éventail sera obscurcie par la 3/4 zone en forme d'éventail du élément de niveau supérieur. Pour obtenir l'effet final.

Ajoutez votre propre animation à la fin du code pour obtenir l'effet final.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!