纯Css实现加载动画效果

效果:

            

代码实现: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Loading</title>
		<style>
			* {
				margin: 0em;
				padding: 0em;
			}

			.loader {
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-mos-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				cursor: default;
			}

			.text {
				position: absolute;
				left: -1.3em;
				top: -1.7em;
				-webkit-animation: text 2s infinite;
				-moz-animation: text 2s infinite;
				-moz-animation: text 2s infinite;
				-ms-animation: text 2s infinite;
				-o-animation: text 2s infinite;
				animation: text 2s infinite;
			}

			.horizontal {
				position: absolute;
				top: 0em;
				left: 0em;
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			.circlesup {
				position: absolute;
				top: -4.7em;
				right: 12.1em;
			}

			.circle {
				position: absolute;
				width: 15em;
				height: 15em;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				-webkit-animation: orbit 2s infinite;
				-moz-animation: orbit 2s infinite;
				-moz-animation: orbit 2s infinite;
				-ms-animation: orbit 2s infinite;
				-o-animation: orbit 2s infinite;
				animation: orbit 2s infinite;
				z-index: 5;
			}

			.circle:after {
				content: '';
				position: absolute;
				width: 2em;
				height: 2em;
				-webkit-border-radius: 100%;
				-moz-border-radius: 100%;
				-ms-border-radius: 100%;
				-o-border-radius: 100%;
				border-radius: 100%;
				background: #17b2f0;
			}

			.circle:nth-child(2) {
				-webkit-animation-delay: 100ms;
				-moz-animation-delay: 100ms;
				-ms-animation-delay: 100ms;
				-o-animation-delay: 100ms;
				animation-delay: 100ms;
				z-index: 4;
			}

			.circle:nth-child(2):after {
				background: #59b9e0;
				-webkit-transform: scale(0.8, 0.8);
				-moz-transform: scale(0.8, 0.8);
				-ms-transform: scale(0.8, 0.8);
				-o-transform: scale(0.8, 0.8);
				transform: scale(0.8, 0.8);
			}

			.circle:nth-child(3) {
				-webkit-animation-delay: 225ms;
				-moz-animation-delay: 225ms;
				-ms-animation-delay: 225ms;
				-o-animation-delay: 225ms;
				animation-delay: 225ms;
				z-index: 3;
			}

			.circle:nth-child(3):after {
				background: #ffa489;
				-webkit-transform: scale(0.6, 0.6);
				-moz-transform: scale(0.6, 0.6);
				-ms-transform: scale(0.6, 0.6);
				-o-transform: scale(0.6, 0.6);
				transform: scale(0.6, 0.6);
			}

			.circle:nth-child(4) {
				-webkit-animation-delay: 350ms;
				-moz-animation-delay: 350ms;
				-ms-animation-delay: 350ms;
				-o-animation-delay: 350ms;
				animation-delay: 350ms;
				z-index: 2;
			}

			.circle:nth-child(4):after {
				background: #ff6d37;
				-webkit-transform: scale(0.4, 0.4);
				-moz-transform: scale(0.4, 0.4);
				-ms-transform: scale(0.4, 0.4);
				-o-transform: scale(0.4, 0.4);
				transform: scale(0.4, 0.4);
			}

			.circle:nth-child(5) {
				-webkit-animation-delay: 475ms;
				-moz-animation-delay: 475ms;
				-ms-animation-delay: 475ms;
				-o-animation-delay: 475ms;
				animation-delay: 475ms;
				z-index: 1;
			}

			.circle:nth-child(5):after {
				background: #DB2F00;
				-webkit-transform: scale(0.2, 0.2);
				-moz-transform: scale(0.2, 0.2);
				-ms-transform: scale(0.2, 0.2);
				-o-transform: scale(0.2, 0.2);
				transform: scale(0.2, 0.2);
			}

			.circlesdwn {
				position: absolute;
				top: 2.5em;
				right: -13.5em;
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			.vertical {
				position: absolute;
				top: -1.84em;
				left: -0.4em;
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				transform: rotate(90deg);
			}

			@-webkit-keyframes text {
				0% {
					transform: scale(.2, .2);
					animation-timing-function: ease-out;
				}

				50% {
					transform: scale(1, 1);
					animation-timing-function: ease-out;
				}

				60% {
					transform: scale(1, 1);
					animation-timing-function: ease-out;
				}

				100% {
					transform: scale(.2, .2);
				}
			}

			@keyframes text {
				0% {
					transform: scale(.2, .2);
					animation-timing-function: ease-out;
				}

				50% {
					transform: scale(1, 1);
					animation-timing-function: ease-out;
				}

				60% {
					transform: scale(1, 1);
					animation-timing-function: ease-out;
				}

				100% {
					transform: scale(.2, .2);
				}
			}

			@-webkit-keyframes orbit {
				0% {
					transform: rotate(45deg);
				}

				5% {
					transform: rotate(45deg);
					animation-timing-function: ease-out;
				}

				70% {
					transform: rotate(405deg);
					animation-timing-function: ease-in;
				}

				100% {
					transform: rotate(405deg);
				}
			}

			@keyframes orbit {
				0% {
					transform: rotate(45deg);
				}

				5% {
					transform: rotate(45deg);
					animation-timing-function: ease-out;
				}

				70% {
					transform: rotate(405deg);
					animation-timing-function: ease-in;
				}

				100% {
					transform: rotate(405deg);
				}
			}

			#content {
				width: 100%;
				height: 100%;
				opacity: 0;
				transition: opacity 0.5s;
			}

			#content iframe {
				width: 100%;
				height: -webkit-fill-available;
			}
		</style>

	</head>
	<body>
		<div class="loader" id="loader">
			<div class="text">Loading...</div>
			<div class="horizontal">
				<div class="circlesup">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div class="circlesdwn">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
			</div>
			<div class="vertical">
				<div class="circlesup">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div class="circlesdwn">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
			</div>
		</div>
		<div id="content">
			<iframe src="//www.albertyy.com"></iframe>
		</div>
	</body>
	<script>
		document.onreadystatechange = loadingChange; //当页面加载状态改变的时候执行这个方法.
		function loadingChange() {
			if (document.readyState == "complete") { //当页面加载状态为完全结束时进入 
				document.getElementById("loader").style.display = "none";
				document.getElementById("content").style.opacity = 1;
			}
		}
	</script>
</html>

 

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页