加载中特效

最新推荐文章于 2024-02-11 20:08:12 发布

mfxcyh

最新推荐文章于 2024-02-11 20:08:12 发布

阅读量289

点赞数 1

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

本文链接：https://blog.csdn.net/mfxcyh/article/details/126720468

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们在做一些网页时，加载某些页面的时间可能会很长。我们可以在加载的时候放一些提示信息，效果如图：

加载中

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>加载中</title>
	</head>
	<body>
		<div class="loader">
			<div class="spinner">
			</div>
			
			<div class="text">loading</div>
			
		</div>
	</body>
	
	<style>
		body{
			display: flex;
			justify-content: center;
			align-content: center;
			height: 100vh;
		}
		.loader{
			margin-top: 285px;
			user-select:none
		}
		.loader .spinner{
			position: relative;
			width: 160px;
			height: 160px;
		
		}
		.loader .spinner::before,
		.loader .spinner::after{
			content: "";
			position: absolute;
		}
		.spinner::before{
			width: 100%;
			height: 100%;
			background-color: #a08fd5;
			animation: spinner 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
		}
		
		.loader .spinner::after{
			width: 100%;
			height: 4px;
			border-radius: 50%;
			background-color: #333;
			bottom: -40px;
			animation: shadow 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
		}
		.loader .text{
			position: absolute;
			top: 50%;
			left:50%;
			transform: translate(-50%,-50%);
			color: #fff;
			font-size: 32px;
			text-transform: uppercase;
			font-weight: 100;
			animation: text 2.5s cubic-bezier(0.75,0,0.5,1) infinite;
		}
		@keyframes spinner{
			50%{
				border-radius: 50%;
				background-color: #f5e866;
				transform: rotate(360deg) scale(0.5);
			}
			100%{
				background-color: #A08FD5;
				transform: rotate(720deg);
			}
		}
		
		@keyframes shadow{
			50%{
				transform: scale(0.5);
			}
		}
		
		@keyframes text{
			0%,100%{
				transform: translate(-50%,-50%) scale(1,1);
			}
			50%{
				transform: translate(-50%,-50%) scale(0.5,0.5);
				color: #000;
			}
		}
		
	</style>
</html>