So verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren-CSS-Tutorial-php.cn

So verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren

php中世界最好的语言

Freigeben： 2018-06-04 11:14:57

Original

2441 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Yuansheng CSS3 verwenden, um den Ringlade- Fortschrittsbalken zu realisieren. wie folgt Dies ist ein praktischer Fall, schauen wir ihn uns an.

Rendering:

Die damalige Anforderung bestand darin, einen Verlauf des Fortschrittsbalkens zu erstellen in einer Fächerform. Effekte werden geladen. Ich habe lange darüber nachgedacht, und es scheint, dass die einzige Möglichkeit, ein Verlaufsbild zu erstellen, die Verwendung von border-img ist. Eine weitere superdumme Methode besteht darin, 50 Rechtecke auf den Fortschrittsbalken zu verteilen. Zu den von CSS3 bereitgestellten Farbverläufen gehören lineare Farbverläufe, radiale Farbverläufe und sich wiederholende Farbverläufe. Ich kann nicht herausfinden, wie man einen fächerförmigen Farbverlauf erreicht. Schluss mit dem Reden, kommen wir zum Code:

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Zusammenfassung der grundlegenden JS-Nutzung

So vermeiden Sie Funktionen und Browser-Rückschlüsse in JS

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!