Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3-CSS-Tutorial-php.cn

Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3

不言

Freigeben： 2018-10-20 10:34:00

Original

11742 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der CSS3-Kreiseffekt ist wie folgt:

Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3

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>

Nach dem Login kopieren

rrree

Der Effekt des rechten Halbkreises von CSS3 ist wie folgt:

Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3

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

Nach dem Login kopieren

Der Effekt des linken Halbkreises von CSS3 ist wie folgt:

Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Der Effekt eines kreisförmigen Fortschrittsbalkens in CSS3 ist wie folgt:

Wie implementiert man einen kreisförmigen Fortschrittsbalken in CSS3? Implementierung eines kreisförmigen Fortschrittsbalkens in CSS3

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!