【CSS 常用加载动画效果】

最新推荐文章于 2025-10-29 14:47:00 发布

原创最新推荐文章于 2025-10-29 14:47:00 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

css 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了三种常见的网页加载效果：呼吸灯效果通过CSS关键帧实现渐变透明度，波浪光效果通过动态背景色和位置移动展示，转圈加载则利用旋转动画创建圆环。

常用加载效果

呼吸灯效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="ti"></div>
	</body>
	<style>
		body {
			background: black;
		}

		#ti {
			/* clip-path: polygon(0 200px, 0 0, 300px 0, 500px 200px); */
			background: red;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			/* 圆形 */
			animation: pulse 2s ease-in-out infinite;

		}

		/* 呼吸灯 */
		@keyframes pulse {
			0% {
				opacity: 0.5;
				/* transform: scale(0.98); */
			}

			50% {
				opacity: 1;
				/* transform: scale(1); */
			}

			100% {
				opacity: 0.5;
				/* transform: scale(0.98); */
			}
		}
	</style>
</html>

波浪光效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="wave"></div>
	</body>
	<style>
		/* 波浪光 */
		.wave {
			position: relative;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			/* 圆形 */
			background: rgba(255, 255, 255, 0.8);
			overflow: hidden;
		}

		.wave:before {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
			animation: wave 2s ease infinite;
		}

		@keyframes wave {
			0% {
				transform: translateX(0);
			}

			100% {
				transform: translateX(-50%);
			}
		}
	</style>
</html>

转圈加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="loader"></div>
	</body>
	<style>
		.loader {
			border: 8px solid #f3f3f3;
			/* 边框颜色 */
			border-top: 8px solid #3498db;
			/* 顶部边框颜色 */
			border-radius: 50%;
			/* 圆形 */
			width: 50px;
			height: 50px;
			animation: spin 2s linear infinite;
			/* 动画效果 */
		}

		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}
	</style>
</html>