Maison > Article > interface Web > Implémenter une barre de progression circulaire en utilisant CSS
Utilisez du css pur pour implémenter la petite application barre de progression, qui peut être utilisée sur d'autres pages ou étudiée par vous-même ~ code source gratuit~~
Code :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP中文网</title> <style> *{ margin: 0; padding: 0; } .progress-ring{ width: 160px; height: 160px; border:20px solid green; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; left: 0; } .progress-track{ width: 160px; height: 160px; border:20px solid green; border-radius: 50%; box-sizing: border-box; position: absolute; clip: rect(0px,80px,160px,0px); top: -20px; left: -20px; } .progress-left{ position:relative; width: 160px; height: 160px; border:20px solid goldenrod; border-radius: 50%; box-sizing: border-box; position: absolute; clip: rect(0px,80px,160px,0px); top: -20px; left: -20px; transform: rotate(3.6deg); transition: transform 2s linear; animation:mymove 3s linear forwards; } .progress-right{ width: 160px; height: 160px; border:20px solid goldenrod; border-radius: 50%; box-sizing: border-box; position: absolute; clip: rect(0px,80px,160px,0px); top: -20px; left: -20px; transform: rotate(180deg); opacity: 0; animation: toggle 0s ease 1.5s forwards ; } .progress-cover{ position:relative; width: 160px; height: 160px; border:20px solid green; border-radius: 50%; box-sizing: border-box; position: absolute; clip: rect(0px,80px,160px,0px); top: -20px; left: -20px; opacity: 1; animation: toggleq 0s ease 1.5s forwards ; } @keyframes mymove{ from{transform: rotate(0deg)} to{transform: rotate(360deg)} } @keyframes toggle{ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toggleq{ 0% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <div class="progress-ring"> <div class="progress-track"></div> <div class="progress-left"></div> <div class="progress-right"></div> <div class="progress-cover"></div> <div class="inn"></div> </div> </body> </html>
Obtenez-le et étudiez-le gratuitement ! D'autres bons codes sources sont disponibles sur le Site Web PHP chinois, suivez-nous pour vous donner un bon aperçu~
Recommandations associées :
css, jquery pour réaliser une rotation tridimensionnelle 3D
implémentation CSS d'une tête de chat en mouvement
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!