HTML5和CSS3/demo3/index.html

<!DOCTYPE html>
<html>
<head>
	<title>loading2</title>
	<meta charset="utf-8">
	<style>
	.loading-container {
		display: flex;
		margin: 0 auto;
	    width: 300px;
	    height: 300px;
	    background-color: #66ccff;
	}

	.loading-container div {
		margin: auto;
	    width: 10px;
	    height: 40px;
	    background-color: rgba(255, 255, 255, .8);
	    border-radius: 3px;
	}

	.loading-container .one {
	    transform: translateX(80px);
	    animation: .7s infinite height_ ease-in-out;

	}

	.loading-container .two {  
	    animation: .7s infinite height_ ease-in-out;
	    animation-delay: 0.16s;
	}

	.loading-container .three {
	    transform: translateX(-80px);
	    animation: .7s infinite height_ ease-in-out;
	    animation-delay: 0.32s;    
	}

	@keyframes height_ {
	    0%,
	    80%,
	    100% {
	        height: 40px;
	        box-shadow: 0 0 rgba(255, 255, 255, .8);
	    }
	    10% {
	        height: 50px;
	        box-shadow: 0 -10px rgba(255, 255, 255, .8);
	    }
	}
	</style>
</head>
<body>
	<div class="loading-container">
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
	</div>
</body>
</html>