css loading动效

最新推荐文章于 2022-12-23 18:33:44 发布

autm许

最新推荐文章于 2022-12-23 18:33:44 发布

阅读量127

点赞数

分类专栏： css3 css 前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_17108919/article/details/107406773

版权

前端同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

css3

4 篇文章 0 订阅

订阅专栏

css loading动效
css代码

.components-animate-loading {
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: center;
    }

    .components-animate-loading .bor {
      display: inline-flex;
      margin-right: 8px;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #FFBA00;
      animation: loading linear 1s infinite;
      -webkit-animation: loading linear 1s infinite;
    }

    .components-animate-loading .bor:nth-child(1) {
      animation-delay: 0s;
    }

    .components-animate-loading .bor:nth-child(2) {
      animation-delay: .4s;
    }

    .components-animate-loading .bor:nth-child(3) {
      animation-delay: .65s;
    }

    .fs12 {
      font-size: 12px;
    }

    .c898989 {
      color: #898989;
    }

    .pr5 {
      padding-right: 5px;
    }

    @keyframes loading {

      0%,
      60%,
      100% {
        transform: scale(1);
      }

      30% {
        transform: scale(2.5);
      }
    }

    @-webkit-keyframes loading {

      0%,
      60%,
      100% {
        transform: scale(1);
      }

      30% {
        transform: scale(2.5);
      }
    }

html代码

正在拼命加载中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=components-animaite-play, initial-scale=1.0">
  <title>Document</title>
  <style>
    .components-animate-loading {
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: center;
    }

    .components-animate-loading .bor {
      display: inline-flex;
      margin-right: 8px;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #FFBA00;
      animation: loading linear 1s infinite;
      -webkit-animation: loading linear 1s infinite;
    }

    .components-animate-loading .bor:nth-child(1) {
      animation-delay: 0s;
    }

    .components-animate-loading .bor:nth-child(2) {
      animation-delay: .4s;
    }

    .components-animate-loading .bor:nth-child(3) {
      animation-delay: .65s;
    }

    .fs12 {
      font-size: 12px;
    }

    .c898989 {
      color: #898989;
    }

    .pr5 {
      padding-right: 5px;
    }

    @keyframes loading {

      0%,
      60%,
      100% {
        transform: scale(1);
      }

      30% {
        transform: scale(2.5);
      }
    }

    @-webkit-keyframes loading {

      0%,
      60%,
      100% {
        transform: scale(1);
      }

      30% {
        transform: scale(2.5);
      }
    }
  </style>
</head>

<body>
  <div class="components-animate-loading">
    <span class="pr5 fs12 c898989">正在拼命加载中</span>
    <span class="bor"></span>
    <span class="bor"></span>
    <span class="bor"></span>
  </div>

</body>

</html>

autm许

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css loading动效

css loading动效css代码.components-animate-loading { display: flex; height: 60px; align-items: center; justify-content: center; } .components-animate-loading .bor { display: inline-flex; margin-right: 8px; wi
复制链接

扫一扫