等待動畫

時間 2019-11-12
標籤等待動畫简体版
原文原文鏈接
效果以下：css
廢話很少說，見下面代碼：html
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。