css3中clip實現圓環進度條

最後更新：2018-02-09 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文主要和大家介紹了css3 clip實現圓環進度條的範例程式碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

CSS中有一個屬性叫做clip，為修剪，剪裁之意。

clip 屬性剪裁絕對位置元素。這個屬性用於定義一個剪裁矩形。對於一個絕對定義元素，在這個矩形內的內容才可見。出了這個剪裁地區的內容會根據 overflow 的值來處理。

環形進度條.gif

怎麼實現這樣一個圓環進度條的效果呢，可以使用canvas、svg、GIF等等方式，今天我們來說下使用css3怎麼來實現。

實現思路

圓環很簡單，一行cssborder-radius:50%即可實現，而且沒有相容性問題，什麼，你說IE，讓它滾...

我們這裡需要三個圓環，一個整的，兩個半的。大概畫了

這裡半圓環我使用了clip進行裁剪，主要代碼如下,

.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 這個地區的我們裁剪出來 */ }

右邊類似只是裁剪位置改了

.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);  /* 位置更改，計算可以參考 */ }

完整代碼

<!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('.clip'),        left = document.querySelector('.left'),        right = document.querySelector('.right'),        num = document.querySelector('.num'),        rotate = 0;            let loop = setInterval(() => {            if(rotate >= 100){                rotate = 0;                right.classList.add('width-none');                clip.classList.remove('auto');            } else if(rotate > 50){                right.classList.remove('width-none');                clip.classList.add('auto');            }            rotate++;            left.style.transform = 'rotate('+ 3.6*rotate + 'deg)';            num.innerHTML = `${rotate}%`        },100)    </script></body></html>

簡單說下上面的代碼

1、首先隱藏了右半圓，這是因為我們需要旋轉的是左半圓，我們可以等左半圓轉到右邊圓的位置再顯示右邊，就是等到旋轉到180度的時候。

2、同時我們看到主圓添加了clip: rect(0, 200px, 200px, 100px);裁剪樣式，這是因為預設我們進度是0%的，我們只顯示右邊的話才能隱藏左邊，但是我們右邊不是隱藏的嗎？那顯示它幹嘛呢，因為旋轉左邊的時候就看到轉到右邊的圓了。稍微有點繞，請結合代碼，多多理解

3、等到左邊旋轉了180我們需要將右邊顯示出來，並且將box元素的裁剪設定為預設值，就是不裁剪，這這樣才能顯示完整的左右兩個圓。

4、最後我們使用js來控制旋轉角度並將百分比顯示在頁面上

寫在最後

如果上面的解釋看不明白，索性就不要看了，把代碼放在本地調試下，自己去理解。

別鑽牛角尖，代碼是最好的語言。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More