【CSS 常用加载动画效果】

常用加载效果

呼吸灯效果

js 复制代码
<!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>

波浪光效果

js 复制代码
<!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>

转圈加载

js 复制代码
<!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>
相关推荐
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny074 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
2501_918126918 小时前
用html5写一个flappybird游戏
css·游戏·html5
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光8 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5208 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js