css3 clip完成圆环进度条的示例编码

日期：2021-01-20 类型：科技新闻我要分享

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

CSS中有1个特性叫做clip，为修剪，裁剪之意。

clip 特性裁剪肯定精准定位元素。这个特性用于界定1个裁剪矩形框。针对1个肯定界定元素，在这个矩形框内的內容才可见。出了这个裁剪地区的內容会依据 overflow 的值来解决。

环状进度条.gif

如何完成这样1个圆环进度条的实际效果呢，可使用canvas、svg、GIF这些方法，今日大家来讲下应用css3如何来完成。

完成思路

圆环很简易，1行cssborder-radius:50%便可完成，并且沒有适配性难题，甚么，你说IE，让它滚...

大家这里必须3个圆环，1个整的，两个半的。大约画了下图

这里半圆环我应用了clip开展剪裁，关键编码以下,

.left{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid lightblue;
    position:absolute;
    top: ⑴0px;   /* 10的缘故是由于边框是10个像素 */
    right: ⑴0px;
    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: ⑴0px;  /* 10的缘故是由于边框是10个像素 */
    right: ⑴0px;
    clip: rect(0 200px 200px 100px);  /* 部位变更，测算能够参照上图 */ 
}

详细编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            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(⑸0%, ⑸0%);
            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: ⑴0px;
            left: ⑴0px;
        }
        .right{
            width: 200px;
            height: 200px;
            position: absolute;
            border: 10px solid lightblue;
            border-radius: 50%;
            clip: rect(0 200px 200px 100px);
            top: ⑴0px;
            left: ⑴0px;
        }
        .width-none{
            width: 0;
        }
        .auto{
            clip: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="clip">
            <div class="left"></div>
            <div class="right width-none"></div>
        </div>
        <div class="num">

        </div>
    </div>
    <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来操纵转动角度并将百分比显示信息在网页页面上

写在最终

假如上面的解释看不搞清楚，索性就不必看了，把编码放在当地调节下，自身去了解。

别钻牛角尖，编码是最好是的語言。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：手机微信抽奖专用工具如何应用返回下一篇：没有了