使用HTML+CSS制作加载动画

最新推荐文章于 2024-07-16 15:32:05 发布

YYQX爱跳舞

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量1.9k

点赞数 1

分类专栏：小demo

本文链接：https://blog.csdn.net/weixin_42551920/article/details/104252088

版权

小demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单的页面加载动画

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>加载动画</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="loading"></div>
	</body>
</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;
	}
}