用css實現圓形進度條-html教學-PHP中文網

用css實現圓形進度條

韦小宝

發布： 2017-11-18 11:28:04

原創

2732 人瀏覽過

利用純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中文網，關注我們給你好看哦~

相關推薦：

css 、jquery實作3d立體旋轉

css波紋動畫

css實作會動的貓臉

以上是用css實現圓形進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！