Heim > Artikel > Web-Frontend > Clip implementiert Ring-Fortschrittsbalken in CSS3

Clip implementiert Ring-Fortschrittsbalken in CSS3

小云云Original: 2018-02-09 11:14:532604Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum Beispielcode des CSS3-Clips zur Implementierung des Ring-Fortschrittsbalkens vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Es gibt eine CSS-Eigenschaft namens „clip“, was „Trimmen“ bedeutet.

Clip-Eigenschaft schneidet absolut positionierte Elemente ab. Diese Eigenschaft wird verwendet, um ein Beschneidungsrechteck zu definieren. Bei einem absolut definierten Element ist nur der Inhalt innerhalb des Rechtecks sichtbar. Inhalte außerhalb dieses Beschneidungsbereichs werden entsprechend dem Überlaufwert verarbeitet.

Ring-Fortschrittsbalken.gif

Wie kann man den Effekt eines solchen Ring-Fortschrittsbalkens erzielen? Lassen Sie uns heute darüber sprechen, wie Sie es mit CSS3 implementieren.

Implementierungsideen

Der Ring ist sehr einfach. Eine Zeile von cssborder-radius:50% kann implementiert werden, und es gibt kein Kompatibilitätsproblem IE, lass es raus...

Wir brauchen hier drei Ringe, einen vollen und zwei halbe. Ich habe das Bild unten grob gezeichnet

Hier habe ich einen Clip verwendet, um den halbkreisförmigen Ring auszuschneiden. Der Hauptcode lautet wie folgt:

.left{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: -10px;   /* 10的原因是因为边框是10个像素 */
    right: -10px;
    clip: rect(0 100px 200px 0);  /* 上面为0 右边到100px 下面200px 左边到0 这个区域的我们裁剪出来 */ 
}

Die rechte Seite ist ähnlich, außer dass die Zuschneideposition geändert wurde

.right{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: -10px;  /* 10的原因是因为边框是10个像素 */
    right: -10px;
    clip: rect(0 200px 200px 100px);  /* 位置更改，计算可以参考上图 */ 
}

Vollständiger Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            box-sizing: border-box;
        }
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: #ccc;
            border-radius: 50%;
            left: 40%;
            top: 200px;

        }
        .num{
            position: absolute;
            top: 50%;
            left: 50%;
            background: #fff;
            border-radius: 50%;
            width: 180px; 
            height: 180px;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 180px;
            font-size: 32px;
        }
        
        
        .clip{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid #ccc;
            border-radius: 50%;
            clip: rect(0, 200px, 200px, 100px);
        }
        .left{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 100px 200px 0);
            top: -10px;
            left: -10px;
        }
        .right{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 200px 200px 100px);
            top: -10px;
            left: -10px;
        }
        .width-none{
            width: 0;
        }
        .auto{
            clip: auto;
        }
    </style>
</head>
<body>
    <p class="box">
        <p class="clip">
            <p class="left"></p>
            <p class="right width-none"></p>
        </p>
        <p class="num">

        </p>
    </p>
    <script >
        let clip = document.querySelector(&#39;.clip&#39;),
        left = document.querySelector(&#39;.left&#39;),
        right = document.querySelector(&#39;.right&#39;),
        num = document.querySelector(&#39;.num&#39;),
        rotate = 0;
    
        let loop = setInterval(() => {
            if(rotate >= 100){
                rotate = 0;
                right.classList.add(&#39;width-none&#39;);
                clip.classList.remove(&#39;auto&#39;);
            } else if(rotate > 50){
                right.classList.remove(&#39;width-none&#39;);
                clip.classList.add(&#39;auto&#39;);
            }
            rotate++;
            left.style.transform = &#39;rotate(&#39;+ 3.6*rotate + &#39;deg)&#39;;
            num.innerHTML = `${rotate}%`
        },100)

    </script>
</body>
</html>

Erklären Sie kurz den obigen Code

1. Der rechte Halbkreis ist ausgeblendet. Dies liegt daran, dass wir den linken Halbkreis drehen müssen Damit sich der linke Halbkreis an die Position des rechten Kreises bewegt und dann die rechte Seite anzeigt, warten Sie einfach, bis er sich um 180 Grad dreht.

Gleichzeitig sehen wir, dass der Clip: rect(0, 200px, 200px, 100px); zum Hauptkreis hinzugefügt wird. Dies liegt daran, dass unser Fortschritt standardmäßig 0 % beträgt. und wir können es nur verbergen, wenn wir die rechte Seite auf der linken Seite anzeigen, aber ist unsere rechte Seite nicht verborgen? Was zeigt es dann? Denn wenn man es nach links dreht, sieht man den Kreis, der sich nach rechts dreht. Es ist etwas kompliziert, bitte kombinieren Sie es mit dem Code und verstehen Sie es besser

3. Wenn die linke Seite um 180 gedreht wird, müssen wir die rechte Seite anzeigen und den Zuschnitt des Box-Elements auf die Standardeinstellung setzen Wert, der kein Zuschneiden ist, sodass die linken und rechten Kreise vollständig angezeigt werden können.

4. Schließlich verwenden wir js, um den Drehwinkel zu steuern und den Prozentsatz auf der Seite anzuzeigen

Schreiben Sie am Ende

Wenn Sie können Ich sehe die obige Erklärung nicht. Verstehen Sie sie, lesen Sie sie einfach nicht, fügen Sie den Code in das lokale Debugging ein und verstehen Sie ihn selbst.

Seien Sie nicht zu ungeduldig, Code ist die beste Sprache.

Verwandte Empfehlungen:

CSS3-Methode zum Implementieren eines kreisförmigen Fortschrittsbalkens

Detaillierte Erläuterung der Leinwand zum Implementieren eines bogenförmigen und kreisförmigen Fortschritts bar-Instanzmethode

Verwenden eines CSS-Clips zum Implementieren eines Tutorialbeispiels für den Audiowiedergabering-Fortschrittsbalken

Das obige ist der detaillierte Inhalt vonClip implementiert Ring-Fortschrittsbalken in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 JS overflow canvas

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：CSS3-Übergänge und -Transformationen erzielen einen Marquee-EffektNächster Artikel：CSS3-Übergänge und -Transformationen erzielen einen Marquee-Effekt

In Verbindung stehende Artikel

Mehr sehen