CSS3简单实现正在加载特效

记录自己写的前端小东东，方便以后拿来复用。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<meta author="桜智神座一诚·木">
	<style type="text/css">
		*{margin: 0;padding: 0;border: 0;}
		/*------------------------------------ loading ------------------------------------*/
		.loading {
		    position: relative;
		    display: inline-block;
		    width: 100px;
		    height: 100px;
		    text-align: center;
		    margin: -20px 0 0 0px;
		    border-radius: 5px;
		    left: 50%;
		    right: auto;
		    margin-left: -50px;
		    margin-top: -46px;
		    top: 50%;
		    bottom: 0;
		    position: absolute;
		    background-color: rgba(0,0,0,.7);
		}
		.loading span {
		    display: inline-block;
		    position: relative;
		    width: 10px;
		    height: 10px;
		    top: 37.5px;
		    margin: 0 8px 0 0px;
		    border-radius: 50%;
		    background: #37d2d2;
		    -webkit-animation: load 1.2s ease infinite;
		}

		.loading span:last-child {
		  margin-right: 0;
		}

		@-webkit-keyframes load {
		  0% {
		    opacity: 0.2;
		    -webkit-transform: scale(0);
		  }
		  50% {
		    opacity: 1;
		    -webkit-transform: scale(1);
		  }
		  100% {
		    opacity: 0.2;
		    -webkit-transform: scale(0);
		  }
		}
		.loading span:nth-child(2) {
		  -webkit-animation-delay: 0.3s;
		}
		.loading span:nth-child(3) {
		  -webkit-animation-delay: 0.6s;
		}
		/*------------------------------------ / loading ------------------------------------*/
	</style>
</head>
<body>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>
CSS3简单实现正在加载特效

猜你喜欢
