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

写在最终

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

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

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

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