Clip은 CSS3에서 링 진행률 표시줄을 구현합니다.
- 小云云원래의
- 2018-02-09 11:14:532546검색
이 글에서는 링 프로그레스 바를 구현하기 위한 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('.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. 동시에 기본 원에 자르기 스타일이 추가된 것을 볼 수 있습니다. 이는 기본적으로 숨길 수만 있기 때문입니다. 오른쪽만 표시하면 왼쪽이 표시되는데 오른쪽이 숨겨져 있는 것 아닌가요? 그러면 왼쪽으로 돌리면 오른쪽으로 회전하는 원이 보이기 때문이죠. 조금 복잡합니다. 이해를 돕기 위해 코드와 결합해 보세요
3. 왼쪽이 180도 회전하면 오른쪽이 표시되어야 하며, 상자 요소의 자르기를 기본값으로 설정해야 합니다. , 자르기가 없으므로 왼쪽과 오른쪽 전체가 둥글게 표시됩니다.
4. 마지막으로 js를 사용하여 회전 각도를 제어하고 페이지에 백분율을 표시합니다.
마지막에 작성하세요
위 설명이 이해가 안 되시면 읽지 말고 그냥 넣으세요. 로컬 디버깅 아래의 코드를 직접 이해하세요.
너무 조급해하지 마세요. 코드는 최고의 언어입니다.
관련 권장 사항:
호 및 링 진행률 표시줄을 구현하는 캔버스의 예제 메서드에 대한 자세한 설명
CSS 클립을 사용하여 오디오 재생 링 진행률 표시줄 구현 튜토리얼 예
위 내용은 Clip은 CSS3에서 링 진행률 표시줄을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!