Comment utiliser la source CSS3 pour implémenter une barre de progression de chargement en anneau-tutoriel CSS-php.cn

Comment utiliser la source CSS3 pour implémenter une barre de progression de chargement en anneau

php中世界最好的语言

Libérer： 2018-06-04 11:14:57

original

2491 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser Yuansheng css3 pour réaliser la barre de progression du chargement de l'anneau Quelles sont les précautions pour utiliser Yuansheng css3 pour réaliser la barre de progression du chargement de l'anneau, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Rendu :

L'exigence à cette époque était de rendre la barre de progression dégradée en forme d'éventail Chargement des effets. J'y ai réfléchi longtemps, et il semble que la seule façon de créer une image dégradée soit d'utiliser border-img. Une autre méthode super stupide consiste à écrire 50 rectangles répartis sur la barre de progression. Les dégradés fournis par CSS3 incluent des dégradés linéaires, des dégradés radiaux et des dégradés répétitifs. Je n'arrive pas à comprendre comment obtenir un dégradé en forme d'éventail. Ne parlons plus, passons au 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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Résumé de l'utilisation de base de js

Comment éviter les fonctionnalités et l'inférence du navigateur dans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!