Web-Frontend
CSS-Tutorial
Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3
Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3
Wir sehen oft Fortschrittsbalken, aber wie setzt man sie um? In unserem vorherigen Artikel (Wie implementiert man einen Fortschrittsbalken in CSS3? Eine Einführung in die Implementierungsmethode des Fortschrittsbalkens in CSS3) haben wir kurz über die Methode zum Implementieren eines langen Fortschrittsbalkens in CSS3 gesprochen. Im heutigen Artikel stellen wir Ihnen die Implementierungsmethode der CSS3-Zirkelfortschrittsleiste vor. Interessierte Freunde können einen Blick darauf werfen.
Wir alle wissen, dass es sehr einfach ist, eine statische Donutform zu erstellen, genau wie die folgende
<!DOCTYPE html>
<html>
<head>
<style>
.circle{
width: 160px;
height: 160px;
border:20px solid orange;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>Der CSS3-Kreiseffekt ist wie folgt:
Aber der kreisförmige Fortschrittsbalken ist ein dynamischer Effekt, daher gibt es viel zu beachten. Schauen wir uns zunächst die Implementierungsidee des CSS-zirkulären Fortschrittsbalkens an:
Wir können den gesamten Ring in einen linken und einen rechten Halbkreis teilen. Lassen Sie beispielsweise zuerst den rechten Halbkreis rotieren und verbinden Sie ihn dann mit dem linken Halbkreis , kann die Drehung des gesamten Rings erreicht werden, was einem Kreis entspricht.
Werfen wir einen Blick auf die spezifische Implementierungsmethode des CSS3-Zirkelfortschrittsbalkens.
Schauen wir uns zunächst die Implementierung des rechten Halbkreises von CSS3 an
<div class="right">
<div class="rightcircle"></div>
</div>Der Effekt des rechten Halbkreises von CSS3 ist wie folgt:
CSS3 links Halbkreis-Implementierung und Der rechte Halbkreis ist genau das Gegenteil. Der Code lautet wie folgt:
.right{
position: relative;
width: 100px;
height: 200px;
overflow: hidden;
}
.rightcircle{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
top:0;
right: 0;
border-top:20px solid lightblue;
border-right:20px solid lightblue;
-webkit-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-o-transform : rotate(45deg);
transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
-webkit-animation-name: circle_right; /* 动画名称 */
-webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */
-webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
-webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
0%{
transform : rotate(-135deg);
}
100%{
transform : rotate(45deg);
}
}Der Effekt des linken Halbkreises von CSS3 ist wie folgt:
Als nächstes müssen Sie nur noch die beiden Halbkreise zusammenfügen, um den Effekt eines kreisförmigen CSS3-Fortschrittsbalkens zu erzielen.
Der Code für CSS3, um einen kreisförmigen Fortschrittsbalken zu realisieren ist wie folgt:
.right{
position: relative;
width: 100px;
height: 200px;
overflow: hidden;
}
.rightcircle{
width: 160px;
height: 160px;
border:20px solid transparent;
border-radius: 50%;
position: absolute;
bottom:0;
left: 0;
border-bottom:20px solid lightblue;
border-left:20px solid lightblue;
-webkit-transform : rotate(45deg);
-moz-transform : rotate(45deg);
-o-transform : rotate(45deg);
transform : rotate(45deg); /* 旋转45度 */
}
/* 这里仅考虑webkit内核的情况，您可以写完整了 */
.rightcircle{
-webkit-animation-name: circle_right; /* 动画名称 */
-webkit-animation-duration: 5s; /* 完成一个动画需要的时间 */
-webkit-animation-timing-function: linear; /* 动画播放的方式，linear是匀速变化 */
-webkit-animation-iteration-count: infinite; /* 动画播放的次数，infinite是无限次数 */
}
@-webkit-keyframes circle_right{
0%{
transform : rotate(-135deg);
}
100%{
transform : rotate(45deg);
}
}<div class="circle_process">
<div class="wrapper right">
<div class="circle rightcircle"></div>
</div>
<div class="wrapper left">
<div class="circle leftcircle" id="leftcircle"></div>
</div>
</div>Der Effekt eines kreisförmigen Fortschrittsbalkens in CSS3 ist wie folgt:
Dieser Artikel endet hier. Für weitere spannende Inhalte, Sie Kann der chinesischen PHP-Website folgen! ! !
Das obige ist der detaillierte Inhalt vonWie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
