>  기사  >  웹 프론트엔드  >  CSS를 사용하여 순환 진행률 표시줄 구현

CSS를 사용하여 순환 진행률 표시줄 구현

韦小宝
韦小宝원래의
2017-11-18 11:28:042804검색

순수한 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 3차원 회전을 구현합니다

css 리플 애니메이션

css로 움직이는 고양이 얼굴을 구현해보세요

위 내용은 CSS를 사용하여 순환 진행률 표시줄 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.