<html> <head> <title>Sample Page</title> <meta charset="UTF-8"> </head> <style> .all{ width: 400px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } .all-d{ width: 200px; height: 400px; position: absolute; top:0; overflow: hidden; } .back{ width : 396px; height :396px; border:2px solid #ddd; border-radius :50%; } .right{ right:0; } .left{ left:0; } .down{ width: 396px; height: 396px; border:2px solid transparent; border-radius: 50%; position: absolute; top:0; } .down-right{ border-top:2px solid rgb(88,221,172); border-right:2px solid rgb(88,221,172); transform: rotate(-135deg); right:0; } .down-left{ border-top:2px solid rgb(88,221,172); border-left:2px solid rgb(88,221,172); transform: rotate(-225deg); left:0; } .an-right-one{ animation: animation-right-begin 1s linear forwards ; } .an-right-two{ animation: animation-right-last 1s linear forwards ; } .an-left-one{ animation: animation-left-begin 1s linear forwards ; } .an-left-two{ animation: animation-left-last 1s linear forwards ; } @keyframes animation-right-begin{ 0%{transform: rotate(-135deg);} 100%{transform: rotate(-45deg);} } @keyframes animation-right-last{ 0%{transform: rotate(-45deg);} 100%{transform: rotate(45deg);} } @keyframes animation-left-begin{ 0%{transform: rotate(-225deg);} 100%{transform: rotate(-135deg);} } @keyframes animation-left-last{ 0%{transform: rotate(-135deg);} 100%{transform: rotate(-45deg);} } </style> <body> <div class='all'> <div class='back'> <div class="all-d right"><div class="down down-right" id='right'></div></div><div class="all-d left"><div class="down down-left" id='left'></div></div> </div> </div> <input type='button' onclick='addClass()' value='下一步'> </body> </html> <script> var judge = 1; function addClass(){ if(judge==1){ document.getElementById('right').className+=' an-right-one'; } if(judge==2){ document.getElementById('right').className+=' an-right-two'; } if(judge==3){ document.getElementById('left').className+=' an-left-one'; } if(judge==4){ document.getElementById('left').className+=' an-left-two'; } judge++; } </script>
CSS3 圆形进度条
最新推荐文章于 2023-10-26 10:46:11 发布