css3动画-加载中···_css 加载中...动画-优快云博客

本文链接：https://blog.youkuaiyun.com/ens600/article/details/103957373

本文介绍了使用CSS3实现四种加载动画的技巧。通过scale()方法进行尺度变换，实现元素的大小变化，以及translateY()方法使元素沿Y轴移动，创建小球上下跌落并反弹的效果。详细代码示例分别展示了小球整体变大变小、方块高度变化、小球围成圆圈和小球上下移动的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AIt
像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。

第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。

废话不多说了，上代码。

首先，第一个加载中的动画：
HTML:

<div id="loading1">
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
        <div class="demo1"></div>
</div>

CSS:

.demo1 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #68b2ce;
    float: left;
    margin: 0 3px;
    animation: demo1 linear 1s infinite;
    -webkit-animation: demo1 linear 1s infinite;
}
.demo1:nth-child(1){
    animation-delay:0s;
}
.demo1:nth-child(2){
    animation-delay:0.15s;
}
.demo1:nth-child(3){
    animation-delay:0.3s;
}
.demo1:nth-child(4){
    animation-delay:0.45s;
}
.demo1:nth-child(5){
    animation-delay:0.6s;
}
@keyframes demo1 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scale(2.5);}
}
@-webkit-keyframes demo1 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scale(2.5);}
}

第二个动画和第一个动画大同小异，第一个动画是将小球整体变大变小，第二动画则是将小方块的高度变大变小，而宽度不变：
HTML:

<div id="loading2">
    <div class="demo2"></div>
    <div class="demo2"></div>
    <div class="demo2"></div>
    <div class="demo2"></div>
    <div class="demo2"></div>
</div>

CSS:

.demo2 {
    width: 4px;
    height: 6px;
    background: #68b2ce;
    float: left;
    margin: 0 3px;
    animation: demo2 linear 1s infinite;
    -webkit-animation: demo2 linear 1s infinite;
}
.demo2:nth-child(1){
    animation-delay:0s;
}
.demo2:nth-child(2){
    animation-delay:0.15s;
}
.demo2:nth-child(3){
    animation-delay:0.3s;
}
.demo2:nth-child(4){
    animation-delay:0.45s;
}
.demo2:nth-child(5){
    animation-delay:0.6s;
}
@keyframes demo2 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scaleY(3);}
}
@-webkit-keyframes demo2 
{
    0%,60%,100% {transform: scale(1);}
    30% {transform: scaleY(3);}
}

第三个动画就需要将小球的位置定位一下，让几个小球整体上看起来围成一个圆，然后就像第一个一样使小球变大变小：
HTML:

<div id="loading3">
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
     <div class="demo3"></div>
</div>

CSS:

#loading3 {
    position: relative;
    width: 50px;
    height: 50px;
}
.demo3 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #68b2ce;
    position: absolute;
    animation: demo3 linear 0.8s infinite;
    -webkit-animation: demo3 linear 0.8s infinite;
}
.demo3:nth-child(1){
    left: 24px;
    top: 2px;
    animation-delay:0s;
}
.demo3:nth-child(2){
    left: 40px;
    top: 8px;
    animation-delay:0.1s;
}
.demo3:nth-child(3){
    left: 47px;
    top: 24px;
    animation-delay:0.1s;
}
.demo3:nth-child(4){
    left: 40px;
    top: 40px;
    animation-delay:0.2s;
}
.demo3:nth-child(5){
    left: 24px;
    top: 47px;
    animation-delay:0.4s;
}
.demo3:nth-child(6){
    left: 8px;
    top: 40px;
    animation-delay:0.5s;
}
.demo3:nth-child(7){
    left: 2px;
    top: 24px;
    animation-delay:0.6s;
}
.demo3:nth-child(8){
    left: 8px;
    top: 8px;
    animation-delay:0.7s;
}

@keyframes demo3 
{
    0%,40%,100% {transform: scale(1);}
    20% {transform: scale(3);}
}
@-webkit-keyframes demo3 
{
    0%,40%,100% {transform: scale(1);}
    20% {transform: scale(3);}
}

接下来是最后一个动画：
HTML：

<div id="loading5">
     <div class="demo5"></div>
</div>

CSS:

#loading5 {
    width: 20px;
    height: 100px;
    border-bottom: 1px solid #68b2ce;
}
.demo5 {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #68b2ce;
    animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
    -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
}
@keyframes demo5
{
    0%{
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    100% {
        transform:translateY(80px);
        -webkit-transform:translateY(80px);
    }
}
@-webkit-keyframes demo5
{
    0%{
        transform:translateY(0px);
        -webkit-transform:translateY(0px);
    }
    100% {
        transform:translateY(80px);
        -webkit-transform:translateY(80px);
    }
}