순수한 css를 사용하여 진행률 표시줄소형 애플리케이션을 구현하세요. 이 애플리케이션은 다른 페이지에서 사용하거나 직접 조사할 수 있습니다~무료 소스 코드~~
코드:
<!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>
무료로 받아 공부해보세요! 더 좋은 소스 코드는 PHP 중국어 웹사이트에서 보실 수 있습니다. 팔로우하시면 잘 보실 수 있습니다~
관련 추천:
css, jquery를 사용하여 3D 3차원 회전을 구현합니다
위 내용은 CSS를 사용하여 순환 진행률 표시줄 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!