css3实现loading动画

最新推荐文章于 2025-11-05 16:43:36 发布

转载最新推荐文章于 2025-11-05 16:43:36 发布 · 702 阅读

文章标签：

#css

HTML 同时被 2 个专栏收录

1 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文介绍并展示了三种不同的CSS加载动画效果：旋转圆点、伸缩线条及浮动球体集群。这些加载动画通过简单的HTML结构结合CSS3动画特性实现，适用于网页中各种加载场景。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden}
.box .loader{width:30%;float:left;height:200px;margin-right:3%;border:1px #ccc solid;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
@-webkit-keyframes loading-1{0%{transform:rotate(0)}
50%{transform:rotate(180deg)}
100%{transform:rotate(360deg)}
}
.loading-1{width:35px;height:35px;position:relative}
.loading-1 i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(transparent 0,transparent 70%,#333 30%,#333 100%);-webkit-animation:loading-1 .6s linear 0s infinite}
@-webkit-keyframes loading-2{0%{transform:scaleY(1)}
50%{transform:scaleY(.4)}
100%{transform:scaleY(1)}
}
.loading-2 i{display:inline-block;width:4px;height:35px;border-radius:2px;margin:0 2px;background-color:#333}
.loading-2 i:nth-child(1){-webkit-animation:loading-2 1s ease-in .1s infinite}
.loading-2 i:nth-child(2){-webkit-animation:loading-2 1s ease-in .2s infinite}
.loading-2 i:nth-child(3){-webkit-animation:loading-2 1s ease-in .3s infinite}
.loading-2 i:nth-child(4){-webkit-animation:loading-2 1s ease-in .4s infinite}
.loading-2 i:nth-child(5){-webkit-animation:loading-2 1s ease-in .5s infinite}
@-webkit-keyframes loading-3{50%{transform:scale(.4);opacity:.3}
100%{transform:scale(1);opacity:1}
}
.loading-3{position:relative}
.loading-3 i{display:block;width:15px;height:15px;border-radius:50%;background-color:#333;position:absolute}
.loading-3 i:nth-child(1){top:25px;left:0;-webkit-animation:loading-3 1s ease 0s infinite}
.loading-3 i:nth-child(2){top:17px;left:17px;-webkit-animation:loading-3 1s ease -.12s infinite}
.loading-3 i:nth-child(3){top:0;left:25px;-webkit-animation:loading-3 1s ease -.24s infinite}
.loading-3 i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading-3 1s ease -.36s infinite}
.loading-3 i:nth-child(5){top:-25px;left:0;-webkit-animation:loading-3 1s ease -.48s infinite}
.loading-3 i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading-3 1s ease -.6s infinite}
.loading-3 i:nth-child(7){top:0;left:-25px;-webkit-animation:loading-3 1s ease -.72s infinite}
.loading-3 i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading-3 1s ease -.84s infinite}

</style>
<body>
<div class="box">
<div class="loader">
<div class="loading-1">
<i></i>
</div>
</div>

<div class="loader">
<div class="loading-2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>

<div class="loader">
<div class="loading-3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
</body>
</html>