【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>
相关推荐
Hashan15 分钟前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥19 分钟前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程21 分钟前
深入JS(一):手写 Promise
前端·javascript
Hierifer1 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_1 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
半夏陌离2 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰2 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
牛十二2 小时前
mac-intel操作系统go-stock项目(股票分析工具)安装与配置指南
开发语言·前端·javascript
whysqwhw2 小时前
Kuikly 扩展原生 API 的完整流程
前端