Utilisez du CSS pur pour obtenir un effet d'animation de chargement simple (exemple de code)

Cet article utilise des exemples de code pour présenter comment utiliser du CSS pur pour obtenir un effet d'animation de chargement simple. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Tutoriel recommandé : Tutoriel vidéo CSS]

J'ai vu que de nombreux sites Web utilisent actuellement des images gif pour leurs effets de chargement, donc Je suis curieux, comment puis-je y parvenir en utilisant uniquement CSS ? De bonnes choses arrivent, s'il vous plaît, récupérez-les.

Facteur de difficulté

☆☆☆☆

Rendu

Idée

Le CSS est utilisé pour modifier le HTML, donc même les effets les plus simples dépendent du HTML, et la mise en œuvre de la mise en page HTML de cet exemple est encore plus importante.

Analysons d'abord la composition de l'effet d'animation :

• Ligne
  • Si le chargement est immobile, plusieurs lignes forment un cercle
  • Le longueur de ces lignes La même, mais la direction est différente
  • Chaque ligne ne traverse pas tout le diamètre, mais est basée sur le rayon
• Cercle
  • L'effet global est un anneau, la couleur d'arrière-plan du cercle intérieur est la même que celle de l'ensemble de l'arrière-plan
• Animation
  • À partir d'une certaine ligne, le la couleur (transparence) de chaque ligne de rayon change une par une

Pour résumer, nous utilisons les étapes suivantes pour percer le mystère de l'effet de chargement étape par étape :

(1) Utilisez HTML pour implémenter les mêmes lignes réparties le long d'un certain point, elles forment un cercle

(2) Dessinez un petit cercle, ajoutez une couleur de fond et recouvrez-le jusqu'au centre de la ligne

(3) Ajoutez une animation dégradée pour changer la transparence de la ligne

(4) Faites bouger les lignes en définissant différents délais d'animation pour différentes lignes

HTML

<div id="container">
	<div class="load-line rotate-0">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-30">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-60">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-90">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-120">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-150">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div id="circle-center"></div>
</div>

Analyse :

• load-line représente des lignes de rayon de même diamètre Puisque le sens de rotation est le même, placez-les dans le même p<. 🎜>
Étant donné que le délai d'animation de chaque ligne de rayon est différent, ajoutez des lignes gauche et droite
le centre du cercle représente le cercle intérieur

CSS

#container, #circle-center {
	background: grey;
}
#container {
	position: relative;
	width: 600px;
	height: 300px;
}
#circle-center {
	position: absolute;
	top: 100px;
	left: 250px;
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.load-line {
	position: absolute;
	top: 150px;
	left: 200px;
	width: 200px;
	height: 13px;
}
.load-line > span {
	display: inline-block;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background: white;
}
.left {
	float: left;
}
.right {
	float: right;
}
.rotate-0 {
	transform: rotate(0);
}
.rotate-0 > .left {
	animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
	animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-30 > .left {
	animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
	animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-60 > .left {
	animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
	animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-90 > .left {
	animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
	animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
	transform: rotate(120deg);
}
.rotate-120 > .left {
	animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
	animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
	transform: rotate(150deg);
}
.rotate-150 > .left {
	animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
	animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Le conteneur parent de l'effet entier. Le positionnement non statique doit être défini pour faciliter la disposition des éléments enfants. Cet exemple est relatif
• Toutes les lignes ont la même taille et ont des coins arrondis
• Les angles de rotation des lignes dans la même direction de diamètre sont les mêmes
• Toutes les lignes ont la même effet d'animation (la transparence change), la durée de l'animation est la même et le délai d'animation commence à partir d'une certaine ligne et augmente un par un

Vidéo de programmation ! !

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!