Loading动画

最新推荐文章于 2024-07-23 14:51:29 发布

【Ceiauq

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量104

点赞数

分类专栏： CSS 文章标签：动画 css css3

原文链接：https://www.bilibili.com/video/BV1XX4y1F79n?from=search&seid=9463908981659615946&spm_id_from=333.337.0.0

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载</title>
		<link rel="stylesheet" href="loading.css">
	</head>
	<body>
		<div class="loading">
			<span>Loading...
			</span>
		</div>
	</body>
</html>

CSS部分

‘

body{
	margin: 0;
	padding:0;
	background:#34495e;
	height:100vh;
	display: flex;
	align-items:center;
	justify-content: center;
	font-family: "montserrat",sans-serif; 
}

.loading{
	width:200px;
	height: 200px;
	box-sizing: border-box;
	border-radius:50%;
	border-top:10px solid #e74c3c;
	position: relative;
	animation:a1 2s linear infinite;
}

.loading::before,.loading::after{
	content:'';
	width: 200px;
	height: 200px;
	position: absolute;
	left:0;
	top:-10px;
	box-sizing: border-box;
	border-radius: 50%;
}
.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;
	color: #fff;
	text-align: center;
	line-height: 200px;
	animation:a2 2s linear infinite;
}

@keyframes a1{
	to{
		transform: rotate(360deg);
	}
}
@keyframes a2{
	to{
		transform: rotate(-360deg);
	}
}

【Ceiauq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Loading动画

HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加载</title> <link rel="stylesheet" href="loading.css"> </head> <body> <div class="loading"> <span>Loading...
复制链接

扫一扫

专栏目录