Rumah >hujung hadapan web >html tutorial >用css实现圆形进度条
利用纯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中文网,关注我们给你好看哦~
相关推荐:
Atas ialah kandungan terperinci 用css实现圆形进度条. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!