ホームページ >ウェブフロントエンド >htmlチュートリアル >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 中国語 Web サイト で入手できます。フォローしてよく見てください~
関連する推奨事項:
以上がCSSを使用して円形のプログレスバーを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。