【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>
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登3 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4165 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法