等待动画

效果如下：
废话不多说，见下面代码：
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>等待动画</title>

		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				border: 0;
				margin: 0;
				padding: 0;
			}
			
			.flex-center {
				display: -webkit-box;
				display: -moz-box;
				display: -webkit-flex;
				display: -moz-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-align-items: center;
				-moz-align-items: center;
				align-items: center;
				-webkit-justify-content: center;
				justify-content: center;
			}
			
			.wait-wapper {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
			}
			
			.wait-wapper .wait-contain {
				width: 100px;
				height: 100px;
				position: relative;
			}
			
			.wait-wapper .percent-num {
    			/*font-size: 16px;*/
    			font-size: 12px;
			}
			
			.wait-wapper .wait-box {
				width: 100px;
				height: 100px;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			.wait-wapper .wait-box:nth-of-type(2) {
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-o-transform: rotate(45deg);
			}
			
			.wait-wapper .wait-box .circle {
				position: absolute;
				width: 25px;
				height: 25px;
				background: radial-gradient(circle at center, #75b4e6, rgba(117, 180, 230, 0.55), rgba(117, 180, 230, 0.10),#fff);
				border-radius: 12px;
				-webkit-animation: circle_animation 1.2s ease-in-out infinite;
				animation: circle_animation 1.2s ease-in-out infinite;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(1) {
				left: 0;
				top: 0;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(2) {
				right: 0;
				top: 0;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(3) {
				right: 0;
				bottom: 0;
			}
			
			.wait-wapper .wait-box .circle:nth-of-type(4) {
				left: 0;
				bottom: 0;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(1) {
				-webkit-animation-delay: -1.05s;
				animation-delay: -1.05s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(1) {
				-webkit-animation-delay: -0.9s;
				animation-delay: -0.9s;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(2) {
				-webkit-animation-delay: -0.75s;
				animation-delay: -0.75s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(2) {
				-webkit-animation-delay: -0.6s;
				animation-delay: -0.6s;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(3) {
				-webkit-animation-delay: -0.45s;
				animation-delay: -0.45s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(3) {
				-webkit-animation-delay: -0.30s;
				animation-delay: -0.30s;
			}
			
			.wait-wapper .wait-box-1 .circle:nth-of-type(4) {
				-webkit-animation-delay: -0.2s;
				animation-delay: -0.2s;
			}
			
			.wait-wapper .wait-box-2 .circle:nth-of-type(4) {
				-webkit-animation-delay: -0.1s;
				animation-delay: -0.1s;
			}
			
			@keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
			
			@-moz-keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
			
			@-webkit-keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
			
			@-o-keyframes circle_animation {
				0%,
				80%,
				100% {
					transform: scale(0.0);
					-webkit-transform: scale(0.0);
				}
				40% {
					transform: scale(1.0);
					-webkit-transform: scale(1.0);
				}
			}
		</style>

	</head>

	<body>

		<div class="wait-wapper flex-center">
			<div class="wait-contain flex-center">
				<span class="percent-num">
					倒计时/进度
				</span>
				<div class="wait-box wait-box-1">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div class="wait-box wait-box-2">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
			</div>
		</div>
		
	</body>

</html>
猜你喜欢
