用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>
相关推荐
吞掉星星的鲸鱼36 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6639 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木7 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5