利用純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實現圓形進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!