纯css实现 loading（加载）

最新推荐文章于 2024-05-08 11:04:59 发布

爱嘤嘤嘤斯坦...

最新推荐文章于 2024-05-08 11:04:59 发布

阅读量655

点赞数 1

分类专栏：一阶段css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_55472979/article/details/121536984

版权

本文介绍了如何使用纯CSS代码创建吸引人的loading加载动画。通过HTML结构和CSS样式，实现了一个简洁而有效的加载效果，适用于网页加载等待场景。

摘要由CSDN通过智能技术生成

html：

<div class="container">
    <span class="dots-loader hourglass">Loading…</span>
</div>

css：

.container {
	width:100%;
	height:100%;
	display:block;
	position:fixed;
	top:0px;
	left:0px;
	z-index:9;
	background:#ffffff;
}
@-moz-keyframes dots-loader {
	0% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
8.33% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 14px -14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
16.67% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 14px 14px 0 7px,#6d7 14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
25% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px 14px 0 7px,#4ae -14px 14px 0 7px;
}
33.33% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae -14px -14px 0 7px;
}
41.67% {
	-moz-box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px -14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
50% {
	-moz-box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
58.33% {
	-moz-box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px 14px 0 7px,#fc6 -14px 14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
}
66.67% {
	-moz-box-shadow:#f86 -14px -14px 0 7px,#fc6 -14px -14px 0 7px,#6d7 -14px -14px 0 7px,#4ae 14px -14px 0 7px;
	box-shadow:#f86 -14px -14px 0 7

最低0.47元/天解锁文章

爱嘤嘤嘤斯坦...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css实现 loading（加载）

html：<div class="container"> <span class="dots-loader hourglass">Loading…</span></div>css：.container { width:100%; height:100%; display:block; position:fixed; top:0px; left:0px; z-index:9; background:#ffffff;}
复制链接

扫一扫