纯CSS文本Loading动画

作者: Richex 分类: CSS,HTML 发布时间: 2019-04-10 19:50

效果预览

源码

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

<head>
  <meta charset="UTF-8">
  <title>纯CSS文本Loading动画</title>
  <style>
  body {
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
  }

  .loader {
    width: 30em;
    height: 3em;
    color: #fff;
    font-size: 1.5em;
    font-family: sans-serif;
    text-transform: uppercase;
    position: relative;
    animation: change-color 10s linear infinite;
  }

  @keyframes change-color {

    0%,
    100% {
      color: #419693;
    }

    33% {
      color: #4fb7b4;
    }

    66% {
      color: #93d6d0;
    }
  }

  .loader span {
    height: 3em;
    position: absolute;
    left: calc((var(--n) - 1) * 15%);
    animation: moving 2s linear infinite;
    animation-delay: calc((var(--n) - 10) * 0.2s);
  }

  @keyframes moving {
    0% {
      filter: opacity(0);
      transform: rotate(-180deg);
      left: 100%;
    }

    33% {
      filter: opacity(1);
      transform: rotate(0deg);
      left: 60%;
    }

    66% {
      filter: opacity(1);
      transform: rotate(0deg);
      left: 40%;
    }

    100% {
      filter: opacity(0);
      transform: rotate(180deg);
      left: 0%;
    }
  }

  .loader span:nth-child(1) {
    --n: 1;
  }

  .loader span:nth-child(2) {
    --n: 2;
  }

  .loader span:nth-child(3) {
    --n: 3;
  }

  .loader span:nth-child(4) {
    --n: 4;
  }

  .loader span:nth-child(5) {
    --n: 5;
  }

  .loader span:nth-child(6) {
    --n: 6;
  }

  .loader span:nth-child(7) {
    --n: 7;
  }

  .font-l::before {
    content: "l";
  }

  .font-o::before {
    content: "o";
  }

  .font-a::before {
    content: "a";
  }

  .font-d::before {
    content: "d";
  }

  .font-i::before {
    content: "i";
  }

  .font-n::before {
    content: "n";
  }

  .font-g::before {
    content: "g";
  }
  </style>
</head>

<body>
  <div class="loader">
    <span class="font-l"></span>
    <span class="font-o"></span>
    <span class="font-a"></span>
    <span class="font-d"></span>
    <span class="font-i"></span>
    <span class="font-n"></span>
    <span class="font-g"></span>
  </div>
</body>

</html>

     

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续分享和创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注