css3加载动画

来源:赵克立博客分类: HTML5 标签：css发布时间:2022-01-23 14:23:44最后更新:2022-01-23 14:23:44浏览:593

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/8711.html

更新时间：

2022-01-23 14:23:44

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    :root {
      --color: #000;
      --default-color: green;
      --new-color: #0f0;
    }

    body {
      background: #121212
    }

    #loader {
      width: 500px;
      position: absolute;
      text-align: center;
      left: calc(50% - 250px);
      top: calc(50% - 10px)
    }

    #loader .square {
      display: inline-block;
      height: 7px;
      width: 7px;
      margin: 6px;
      position: relative;
      box-shadow: 0 0 20px rgba(0, 0, 0, .3);
      animation: bouncer cubic-bezier(.455, .03, .515, .955) .75s infinite alternate
    }

    #loader .square:nth-child(5n+1) {
      background: #0F9;
      animation-delay: 0
    }

    #loader .square:nth-child(5n+2) {
      background: #0CF;
      animation-delay: calc(0s + (.1s * 1))
    }

    #loader .square:nth-child(5n+3) {
      background: #93F;
      animation-delay: calc(0s + (.1s * 2))
    }

    #loader .square:nth-child(5n+4) {
      background: #F66;
      animation-delay: calc(0s + (.1s * 3))
    }

    #loader .square:nth-child(5n+5) {
      background: #FFF35C;
      animation-delay: calc(0s + (.1s * 4))
    }

    @keyframes bouncer {
      to {
        transform: scale(1.75) translateY(-20px)
      }
    }
  </style>
</head>

<body>
  <div id="loader">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</body>

</html>