Heim > Artikel > Web-Frontend > So verwenden Sie Quell-CSS3, um einen Ringlade-Fortschrittsbalken zu implementieren

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

php中世界最好的语言Original: 2018-06-04 11:14:572439Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erklären Sie ausführlich die Rolle negativer Margin-Werte (grafisches Tutorial)Nächster Artikel：Erklären Sie ausführlich die Rolle negativer Margin-Werte (grafisches Tutorial)

In Verbindung stehende Artikel

Mehr sehen