Codebeispiel für die Implementierung einer Kreis- und Randrotationsanimation mithilfe von CSS

Der Inhalt dieses Artikels befasst sich mit Codebeispielen für die Realisierung von Kreisen und Rahmen in CSS. Ich hoffe, dass er für Freunde hilfreich ist.

Erfolgseffekt:

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

Umsetzungsideen

1 Grafischer Aufbau

Vom Aussehen her setzt sich die Grafik grob zusammen aus: Außenkreis, Innenkreis und Fächerform.

1.1 Äußerer Kreis

In diesem Beispiel wird ein p hauptsächlich zum Festlegen der Höhe und Breite verwendet, und der Hintergrund ist nicht festgelegt oder weiß. Stellen Sie border-radius auf 50 % des äußeren Kreises ein und verwenden Sie einen Rahmen, um den äußeren Kreis zu bilden.

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

Rendering:

1.2 innerer Kreis

Der innere Kreis ist auch eine Frage der Positionierung. boder-radius:50%

1.3 Sektor

Sektor, in diesem Beispiel besteht die Idee der Implementierung auch darin, Teile zusammenzusetzen, Rotation hinzuzufügen und die Grenze

zu verwenden, um dies zu erreichen. border

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

Der obige Code:

ist in die Teile (1), (2), (3) und (4) unterteilt. Abgesehen von festen Formen und Animationen ist (2) der wichtigere Teil. .

Zeichnen Sie zunächst den Kreis (Rand) von

. Andere 1/4 Sektoren werden transparent dargestellt. 3/4

Das Gleiche, verwenden Sie einen anderen Kreis für den gleichen Vorgang, sodass sich die beiden Kreise überlappen können. Der einzige Unterschied besteht darin, dass der zweite Kreis den

Kreis auf Weiß setzt, 3/4Auf transparente Farbe setzt. 1/4

Zu diesem Zeitpunkt wird die Fächerform von

dargestellt, der Hintergrund ist 1/4 und 1/4 ist aufgrund der Transparenz vollständig freigelegt. blue

Da schließlich der letzte Kreis das Element der obersten Ebene ist, wird der blaue fächerförmige Teil beim Drehen des Elements der obersten Ebene durch den

fächerförmigen Bereich des Elements verdeckt Element der obersten Ebene. Um den endgültigen Effekt zu erzielen. 3/4

Fügen Sie am Ende des Codes Ihre eigene Animation hinzu, um den endgültigen Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonCodebeispiel für die Implementierung einer Kreis- und Randrotationsanimation mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!