【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>
相关推荐
软件技术NINI1 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_92 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front2 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀3 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树3 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔3 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04124 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj504 小时前
前端基础之《React(1)—webpack简介》
前端·react