使用HTML+CSS制作加载动画

简单的页面加载动画

html部分

css样式部分

body{
	margin: 0;
	padding: 0;
	background: #f1f1f1;
}
.loading{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(75deg);
	width: 15px;
	height: 15px;
}
.loading::before,.loading::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 15px;
	height: 15px;
	border-radius: 15px;
	animation: loading 1.5s infinite linear;
}

.loading::before{
	box-shadow: 15px 15px red,-15px -15px green;
}
.loading::after{
	box-shadow: 15px 15px blue,-15px -15px gray;
	transform: translate(-50%,-50%) rotate(90deg);
}

@keyframes loading {
	50%{
		height: 45px;
	}
}

效果如图