Heim > Artikel > Web-Frontend > 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.
<div> <div> <div> </div> </div> <div> </div> <div> </div> </div>
#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); } }
Vom Aussehen her setzt sich die Grafik grob zusammen aus: Außenkreis, Innenkreis und Fächerform.
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:
Der innere Kreis ist auch eine Frage der Positionierung. boder-radius:50%
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. .
. Andere 1/4
Sektoren werden transparent dargestellt. 3/4
Kreis auf Weiß setzt, 3/4
Auf transparente Farbe setzt. 1/4
dargestellt, der Hintergrund ist 1/4
und 1/4 ist aufgrund der Transparenz vollständig freigelegt. blue
fächerförmigen Bereich des Elements verdeckt Element der obersten Ebene. Um den endgültigen Effekt zu erzielen. 3/4
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!