клип реализует круговой индикатор выполнения

CSS

Эффект

环形进度条.gif

Как добиться эффекта такого кругового прогресс-бара, можно использовать canvas, svg, GIF и т.д. Сегодня поговорим о том, как использовать css3 для его достижения.

Реализовать идеи

Кольцо очень простое, одна строчка cssborder-radius:50%Добиться можно, и проблем с совместимостью нет, что, скажете вы, IE, пусть катится...

Здесь нам нужно три кольца, одно полное и два с половиной. Я, наверное, нарисовал следующую картину

image.png

Здесь я использовал полукруг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>
        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(-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>
    <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 для управления уголкой вращения и процент, отображаемый на странице

напиши в конце

Если вы не понимаете приведенное выше объяснение, просто не читайте его, поместите код в локальную отладку и разберитесь сами.

Не дайте себя обмануть, код — лучший язык.

По-прежнему очень просто использовать клип, чтобы реализовать движение круга, и нет необходимости учитывать совместимость.Вы можете увидеть клип.Дневник Чжан Синьсюй

Категории