css3实现loading动画

最新推荐文章于 2023-07-11 11:07:51 发布

codeXml

最新推荐文章于 2023-07-11 11:07:51 发布

阅读量1k

点赞数

分类专栏： css3 文章标签： css3 动画 css

本文链接：https://blog.csdn.net/qq_39905409/article/details/122209878

版权

css3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<div class="loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

.loading {
  width: 76px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    display: inline-block;
    width: 8px;
    height: 100%;
    background: rgba(40, 89, 247, 0.5);
    border-radius: 20px;
    -webkit-animation: actionLoad 1s ease infinite;
    animation: actionLoad 1s ease infinite;

    &:last-child {
      margin-right: 0;
    }

    &:nth-child(2) {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    &:nth-child(3) {
      -webkit-animation-delay: 0.6s;
      animation-delay: 0.6s;
    }
    &:nth-child(4) {
      -webkit-animation-delay: 0.9s;
      animation-delay: 0.9s;
    }
    &:nth-child(5) {
      -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s;
    }
  }

  @keyframes actionLoad {
    0%, 100% {
      height: 60%;
      background: rgba(40, 89, 247, 0.5);
    }
    50% {
      height: 100%;
      margin: -15px 0;
      background: rgba(40, 89, 247, 0.8);
    }
  }

语法：
animation：name duration timing-function delay iteration-count direction fill-mode play-state

参数说明：
name：@keyframes后面的名称
duration ：多少秒或毫秒完成动画
timing-function：动画将如何完成一个周期
delay: 动画在启动前的延迟间隔
iteration-count: 动画的播放次数
direction: 是否应该轮流反向播放动画
fill-mode: 当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
play-state: 动画是否正在运行或已暂停

timing-function可选参数：
在这里插入图片描述
iteration-count可选参数：
direction可选参数：
fill-mode可选参数：
play-state可选参数：