用css画一个loading

html 复制代码
<!DOCTYPE html>
<html>
<head>
	<title>loading</title>
	<style>
		.loading { position : relative; display : inline-block; }
		.loading .dot { position: absolute; opacity : 0; width: 64px; height: 64px; transform: rotate(225deg); animation-name: loading; animation-iteration-count: infinite; animation-duration: 5.28s; }
		.loading .dot:after { content : ""; position : absolute; width : 6px; height : 6px; border-radius : 50%; background : #000; }
		.loading .dot:nth-child(2) { animation-delay : .23s; }
		.loading .dot:nth-child(3) { animation-delay : .46s; }
		.loading .dot:nth-child(4) { animation-delay : .69s; }
		.loading .dot:nth-child(5) { animation-delay : .92s; }
		
		@keyframes loading {
			0% { transform : rotate(225deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
			8% { transform : rotate(345deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
			30% { transform : rotate(455deg); animation-timing-function : cubic-bezier(0.42, 0, 0.58, 1.0); }
			40% { transform : rotate(690deg); animation-timing-function : cubic-bezier(0.0, 0.0, 1.0, 1.0); }
			60% { transform : rotate(815deg); opacity : 1; animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
			75% { transform : rotate(965deg); animation-timing-function : cubic-bezier(0, 0, 0.58, 1.0); }
			76% { opacity : 0; }
			100% { opacity : 0; }
		}
</style>
</head>
<body>
	
<div class="loading" >
	<div class="dot"></div>
	<div class="dot"></div>
	<div class="dot"></div>
	<div class="dot"></div>
	<div class="dot"></div>
</div>
</body>
</html>
相关推荐
MiyueFE1 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子5 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~33 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了35 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_37 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟1 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计