Clip은 CSS3에서 링 진행률 표시줄을 구현합니다.-CSS 튜토리얼-php.cn

Clip은 CSS3에서 링 진행률 표시줄을 구현합니다.

小云云

풀어 주다： 2018-02-09 11:14:53

원래의

2650명이 탐색했습니다.

이 글에서는 링 프로그레스 바를 구현하기 위한 CSS3 클립의 샘플 코드에 대한 관련 정보를 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

CSS에는 다듬기라는 뜻의 클립이라는 속성이 있습니다.

clip 속성은 절대 위치의 요소를 클립합니다. 이 속성은 클리핑 사각형을 정의하는 데 사용됩니다. 절대적으로 정의된 요소의 경우 사각형 내의 내용만 표시됩니다. 이 클리핑 영역 외부의 콘텐츠는 오버플로 값에 따라 처리됩니다.

링 진행률 표시줄.gif

링 진행률 표시줄의 효과를 얻는 방법 캔버스, svg, GIF 등을 사용할 수 있습니다. 오늘은 CSS3를 사용하여 이를 구현하는 방법에 대해 이야기하겠습니다.

구현 아이디어

원은 매우 간단합니다. cssborder-radius:50% 한 줄을 구현할 수 있으며, 뭐, IE라고 했으니 굴리도록 하세요...

필요합니다. 여기에 세 개의 원이 있습니다. 하나는 전체이고 두 개는 절반입니다. 아래 그림을 대충 그렸습니다

여기서 반원을 자르기 위해 클립을 사용했습니다. 주요 코드는 다음과 같습니다.

.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(&#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>

로그인 후 복사

위 코드에 대해 간단히 설명하겠습니다

1. 먼저 회전해야 할 부분이 왼쪽 반원이기 때문입니다. 왼쪽 반원을 사용하여 오른쪽 원의 위치로 회전한 다음 오른쪽을 표시합니다. 즉, 회전이 180도가 될 때까지 기다립니다.

2. 동시에 기본 원에 자르기 스타일이 추가된 것을 볼 수 있습니다. 이는 기본적으로 숨길 수만 있기 때문입니다. 오른쪽만 표시하면 왼쪽이 표시되는데 오른쪽이 숨겨져 있는 것 아닌가요? 그러면 왼쪽으로 돌리면 오른쪽으로 회전하는 원이 보이기 때문이죠. 조금 복잡합니다. 이해를 돕기 위해 코드와 결합해 보세요

3. 왼쪽이 180도 회전하면 오른쪽이 표시되어야 하며, 상자 요소의 자르기를 기본값으로 설정해야 합니다. , 자르기가 없으므로 왼쪽과 오른쪽 전체가 둥글게 표시됩니다.

4. 마지막으로 js를 사용하여 회전 각도를 제어하고 페이지에 백분율을 표시합니다.

마지막에 작성하세요

위 설명이 이해가 안 되시면 읽지 말고 그냥 넣으세요. 로컬 디버깅 아래의 코드를 직접 이해하세요.

너무 조급해하지 마세요. 코드는 최고의 언어입니다.