CSS--Loading加载动画

原创已于 2025-06-05 07:32:55 修改 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2023-05-14 16:43:07 首次发布

这段代码展示了如何使用CSS实现一个灵活的加载动画。通过设置display为flex，justify-content为center来居中显示加载元素。每个.loaderdiv具有黑色背景和50%的圆角，利用关键帧(keyframes)动画改变其透明度和位置，创建出逐个延迟淡出的视觉效果。

CSDN加载动画<线条>

 
<div class="line-scale">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
</div>

<style>
.line-scale > div:nth-child(1){
  animation: line-scale-49438a9a 1s cubic-bezier(.2,.68,.18,1.08) -.4s infinite;
}

.line-scale > div:nth-child(2){
  animation: line-scale-49438a9a 1s cubic-bezier(.2,.68,.18,1.08) -.3s infinite;
}

.line-scale > div:nth-child(3){
  animation: line-scale-49438a9a 1s cubic-bezier(.2,.68,.18,1.08) -.2s infinite;
}

.line-scale > div:nth-child(4){
  animation: line-scale-49438a9a 1s cubic-bezier(.2,.68,.18,1.08) -.1s infinite;
}

.line-scale > div:nth-child(5){
  animation: line-scale-49438a9a 1s cubic-bezier(.2,.68,.18,1.08) 0s infinite;
}

@keyframes line-scale-49438a9a{
  0%, 100% {
    transform: scaleY(1);
    transform-origin: center center; /** 从中心缩放 */
  }
  50% {
    transform: scaleY(0.4);
    transform-origin: center center;
  }
}

.line-scale > div {
  background-color: #fc5531;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  display: inline-block;
}
</style>

圆点Loading

 <div class="loader">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loader{
  display: flex;
  justify-content: center;
}
.loader div{
  width: 10px;
  height: 10px;
  margin: 3rem 0.2rem;
  background: black;
  border-radius: 50%;
 
}
.loader div:nth-child(1){
animation: line-scale 1s cubic-bezier(.2,.68,.18,1.08) -.8s infinite;
}  
.loader div:nth-child(2){
animation: line-scale 1s cubic-bezier(.2,.68,.18,1.08) -.6s infinite;
}
.loader div:nth-child(3){
animation: line-scale 1s cubic-bezier(.2,.68,.18,1.08) -.4s infinite;
}

@keyframes line-scale{
  to{
    opacity: 0.1;
    /* transform: translate3d(0,-4px,0) */
  }
}
</style>

三角形Loading

 <div class="loader">
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
.loader{
  display: flex;
  justify-content: center;
}
.loader div{
  width: 0;
  height: 0;
  margin: 3rem 0.2rem;
  margin-right: 5px;
  /** 绘制三角形 */
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  
}
.loader div:nth-child(1){
  border-left: 7px solid #8B658B;
  animation: box-scale 1s cubic-bezier(.2,.68,.18,1.08) -.8s infinite;
}  
.loader div:nth-child(2){
  animation: box-scale 1s cubic-bezier(.2,.68,.18,1.08) -.6s infinite;
  border-left: 7px solid blue;
}
.loader div:nth-child(3){
  animation: box-scale 1s cubic-bezier(.2,.68,.18,1.08) -.4s infinite;
  border-left: 7px solid #FF6A6A;
}

@keyframes box-scale{
  to, from{
    transform: scale(1)
  }
  50% {
    transform: scale(.5)
  }
}
</style>