html+css实现加载动画

最新推荐文章于 2025-07-13 16:54:17 发布

韩大璐

最新推荐文章于 2025-07-13 16:54:17 发布

阅读量3.7k

点赞数 10

CC 4.0 BY-SA版权

分类专栏：布局 css 文章标签： html+css 加载动画

本文链接：https://blog.youkuaiyun.com/weixin_41257563/article/details/93040397

css 同时被 2 个专栏收录

7 篇文章

订阅专栏

布局

2 篇文章

订阅专栏

博客分享了HTML和CSS实现的加载动画代码，作者因不会做动图而希望会的小伙伴给予指导，随后直接展示了相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
效果图如上，我不会做动图，啊啊啊，会的小伙伴教我一哈 [手动抱拳]
代码很简单，就直接上代码了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				width: 100%;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #34495e;
				margin: 0;
				padding: 0;
				font-family: "montserrat",sans-serif;
			}
			.loading{
				width: 200px;
				height: 200px;
				box-sizing: border-box;
				border-radius: 50%;;
				border-top: 10px solid #e7473c;
				animation: loading1 2s linear infinite;
				position: relative;
			}
			.loading:before,.loading:after{
				content: "";
				position: absolute;
				left: 0;
				top: -10px;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				box-sizing: border-box;
			}
			.loading:before{
				border-top: 10px solid #e67e22;
				transform: rotate(120deg);
			}
			.loading:after{
				border-top: 10px solid #3498db;
				transform: rotate(240deg);
			}
			.loading span{
				position: absolute;
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				animation: loading2 2s linear infinite;
			}
			
			@keyframes loading1{
				to{
					transform: rotate(360deg);
				}
			}
			@keyframes loading2{
				to{
					transform: rotate(-360deg);
				}
			}
		</style>
	</head>
	<body>
		
		<div class="loading">
			<span>loading...</span>
		</div>
		
	</body>
</html>