집 > 기사 > 웹 프론트엔드 > 소스 CSS3을 사용하여 링 로딩 진행률 표시줄을 구현하는 방법

소스 CSS3을 사용하여 링 로딩 진행률 표시줄을 구현하는 방법

php中世界最好的语言원래의: 2018-06-04 11:14:572439검색

이번에는 Yuansheng CSS3를 사용하여 링 로딩 진행률 표시줄 을 구현하는 방법을 보여 드리겠습니다. Yuansheng CSS3를 사용하여 링 로딩 진행률 표시줄을 구현할 때 주의사항은 무엇입니까? 다음은 실제 사례입니다. 바라보다.

렌더링:

당시 요구 사항은 부채꼴 그라데이션 효과로 진행률 표시줄을 로드하는 것이었습니다. 오랫동안 생각해 봤는데, 그래디언트 이미지를 만드는 유일한 방법은 border-img를 사용하는 것 뿐인 것 같습니다. 또 다른 엄청나게 어리석은 방법은 진행률 표시줄에 분산된 50개의 직사각형을 작성하는 것입니다. CSS3에서 제공하는 그래디언트에는 선형 그래디언트, 방사형 그래디언트 및 반복 그래디언트가 포함됩니다. 부채 모양 그래디언트를 얻는 방법을 알 수 없습니다. 더 이상 이야기하지 말고 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin: 0;
		padding: 0;
	}
	.wrap,.circle,.percent{
		position: absolute;
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}
	.wrap{
		top:50px;
		left:50px;
		background-color: #ccc;
	}
	.circle{
		box-sizing: border-box;
		border:20px solid #ccc;
		clip:rect(0,200px,200px,100px);
	}
	.clip-auto{
		clip:rect(auto, auto, auto, auto);
	}
	.percent{
		box-sizing: border-box;
		top:-20px;
		left:-20px;
	}
	.left{
		transition:transform ease;
		border:20px solid blue;
		clip: rect(0,100px,200px,0);
	}
	.right{
		border:20px solid blue;
		clip: rect(0,200px,200px,100px);
	}
	.wth0{
		width:0;
	}
	.num{
		position: absolute;
		box-sizing: border-box;
		width: 160px;
		height: 160px;
		line-height: 160px;
		text-align: center;
		font-size: 40px;
		left: 20px;
		top: 20px;
		border-radius: 50%;
		background-color: #fff;
		z-index: 1;
	}
	</style>
	<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<p class="wrap">
	<p class="circle">
		<p class="percent left"></p>
		<p class="percent right wth0"></p>
	</p>
	<p class="num"><span>0</span>%</p>
</p>
</body>
<script>
	var percent=0;
	var loading=setInterval(function(){
		if(percent>100){
			percent=0;
			$('.circle').removeClass('clip-auto');
			$('.right').addClass('wth0');
		}else if(percent>50){
			$('.circle').addClass('clip-auto');
			$('.right').removeClass('wth0');
		}
		$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
		$('.num>span').text(percent);
		percent++;
	},200);
</script>
</html>

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!