css loading动画

<!DOCTYPE html>
<html>
<head>
	<title>加载中</title>
	<meta charset="UTF-8">
</head>
<body>
<style>
	.loading1, .loading2, .loading3, .loading4, .loading5, .loading6, .loading7 {
		float: left;
		margin: 10px;
	}
</style>
<style>
	.loading1 {
		position: relative;
	}
	
	.loading1 .left, .loading1 .right {
		position: relative;
		float: left;
		width: 20px;
		height: 40px;
		overflow: hidden;
		background-color: #E5E4E5;
	}
	
	.loading1 .left div, .loading1 .right div {
		content: "";
		position: absolute;
		display: block;
		width: 20px;
		height: 40px;
		background-color: #333;
	}
	
	.loading1 .left {
		border-radius: 40px 0 0 40px;
	}
	
	.loading1 .left div {
		border-radius: 40px 0 0 40px;
		transform-origin: right center;
		animation: circleLeft 3s linear infinite;
	}
	
	.loading1 .right {
		border-radius: 0 40px 40px 0;
	}
	
	.loading1 .right div {
		border-radius: 0 40px 40px 0;
		transform-origin: left center;
		animation: circleRight 3s linear infinite;
	}
	
	.loading1 .center {
		position: absolute;
		left: 3px;
		top: 3px;
		width: 34px;
		height: 34px;
		background-color: #fff;
		border-radius: 50%;
	}
	
	@keyframes circleLeft {
		0% {
			transform: rotateZ(-180deg);
		}
		50% {
			transform: rotateZ(-180deg);
		}
		75% {
			transform: rotateZ(-90deg);
		}
		100% {
			transform: rotateZ(0deg);
		}
	}
	
	@keyframes circleRight {
		0% {
			transform: rotateZ(-180deg);
		}
		25% {
			transform: rotateZ(-90deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		100% {
			transform: rotateZ(0deg);
		}
	}
</style>
<div class="loading1">
	<div class="left">
		<div></div>
	</div>
	<div class="right">
		<div></div>
	</div>
	<div class="center">
		<i></i>
	</div>
</div>
<style>
	.loading2 .left div {
		animation: circleLeft2 6s linear infinite;
	}
	
	.loading2 .right div {
		animation: circleRight2 6s linear infinite;
	}
	
	@keyframes circleLeft2 {
		0% {
			transform: rotateZ(-180deg);
		}
		25% {
			transform: rotateZ(-180deg);
		}
		37.5% {
			transform: rotateZ(-90deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		75% {
			transform: rotateZ(0deg);
		}
		87.5% {
			transform: rotateZ(90deg);
		}
		100% {
			transform: rotateZ(180deg);
		}
	}
	
	@keyframes circleRight2 {
		0% {
			transform: rotateZ(-180deg);
		}
		12.5% {
			transform: rotateZ(-90deg);
		}
		25% {
			transform: rotateZ(0deg);
		}
		50% {
			transform: rotateZ(0deg);
		}
		62.5% {
			transform: rotateZ(90deg);
		}
		75% {
			transform: rotateZ(180deg);
		}
		100% {
			transform: rotateZ(180deg);
		}
	}
</style>
<div class="loading1 loading2">
	<div class="left">
		<div></div>
	</div>
	<div class="right">
		<div></div>
	</div>
	<div class="center">
		<i></i>
	</div>
</div>
<style>
	.loading3 p {
		height: 25px;
		width: 25px;
		margin: auto;
		border: 2px solid #ccc;
		border-bottom-color: #333;
		border-radius: 100%;
		animation: rotate3 1s linear infinite;
	}
	
	@keyframes rotate3 {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>
<div class="loading3">
	<p></p>
</div>
<style>
	.loading4 p {
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 100%;
		background-color: #333;
	}
	
	.loading4 p:first-child {
		animation: scale4 1s 0.15s infinite;
	}
	
	.loading4 p:nth-child(2) {
		animation: scale4 1s 0.3s infinite;
	}
	
	.loading4 p:nth-child(3) {
		animation: scale4 1s 0.45s infinite;
	}
	
	@keyframes scale4 {
		0% {
			transform: scale(0);
		}
		100% {
			transform: scale(1);
		}
	}
</style>
<div class="loading4">
	<p></p>
	<p></p>
	<p></p>
</div>
<style>
	.loading5 p {
		display: inline-block;
		width: 4px;
		height: 35px;
		border-radius: 2px;
		background-color: #333;
	}
	
	.loading5 p:first-child {
		animation: scale5 1s 0.1s infinite;
	}
	
	.loading5 p:nth-child(2) {
		animation: scale5 1s 0.2s infinite;
	}
	
	.loading5 p:nth-child(3) {
		animation: scale5 1s 0.3s infinite;
	}
	
	.loading5 p:nth-child(4) {
		animation: scale5 1s 0.4s infinite;
	}
	
	.loading5 p:nth-child(5) {
		animation: scale5 1s 0.5s infinite;
	}
	
	@keyframes scale5 {
		0% {
			transform: scaleY(1);
		}
		50% {
			transform: scaleY(.4);
		}
		100% {
			transform: scaleY(1);
		}
	}
</style>
<div class="loading5">
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div>
<style>
	.loading6 {
		position: relative;
		width: 80px;
		height: 80px;
	}
	
	.loading6 i {
		position: absolute;
		width: 15px;
		height: 15px;
		background-color: #000;
		border-radius: 100%;
	}
	
	@keyframes loading6 {
		0% {
			transform: scale(0.4);
			opacity: 0.5;
		}
		50% {
			transform: scale(1);
			opacity: 1;
		}
		100% {
			transform: scale(0.4);
			opacity: 0.5;
		}
	}
</style>
<div class="loading6">
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>
<style>
	.loading7 {
		position: relative;
		width: 80px;
		height: 80px;
	}
	
	.loading7 i {
		position: absolute;
		width: 3px;
		height: 10px;
		background-color: #000;
	}
	
	@keyframes loading7 {
		0% {
			opacity: 0.3;
		}
		100% {
			opacity: 1;
		}
	}
</style>
<div class="loading7">
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
	<i></i>
</div>
<script>
  window.onload = function () {
    var eleI6 = document.querySelectorAll('.loading6 i'),
        angle6 = 360 / eleI6.length;
    for (var i = eleI6.length - 1; i >= 0; i--) {
      eleI6[i].style.cssText += 'top:' + (34 - Math.sin(angle6 * i * Math.PI / 180) * 25) + 'px;left:' + (34 - Math.cos(angle6 * i * Math.PI / 180) * 25) + 'px;animation: loading6 1.8s ' + .22 * (i + 1) + 's infinite linear;';
    }
    var eleI7 = document.querySelectorAll('.loading7 i'),
        angle7 = 360 / eleI7.length;
    for (var i = eleI7.length - 1; i >= 0; i--) {
      eleI7[i].style.cssText += 'top:' + (34 - Math.sin(angle7 * i * Math.PI / 180) * 15) + 'px;left:' + (34 - Math.cos(angle7 * i * Math.PI / 180) * 15)
          + 'px;transform:rotate(' + (angle7 * i + 90) + 'deg);animation: loading7 1s ' + .1 * (i + 1) + 's infinite linear;';
    }
  };
</script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » css loading动画

赞 (2)
分享到:更多 ()

发表评论 0