Live2D

分享一个序列增写的动画 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .loading {
        width: 420px;
        height: 420px;
        margin: 0 auto;
        background-image: url("https://gw.alicdn.com/imgextra/i1/O1CN01HK5GIa1JcwahRfzy8_!!6000000001050-2-tps-840-840.png");
        background-size: 840px 840px;
        background-repeat: no-repeat;
        animation-name: successAn;
        animation-duration: 0.96s;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-timing-function: steps(1);
        position: relative;
        z-index: 2;
      }

      .bg {
        position: absolute;
        left: 50%;
        top: 89px;
        width: 503px;
        height: 219px;
        background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN017oRQvS1nxxERrUbGm_!!6000000005157-2-tps-503-219.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: -251px;
        z-index: 1;
      }

      @keyframes successAn {
        0% {
        }

        8.33% {
          background-position: -420px 0px;
        }

        16.67% {
          background-position: 0px -420px;
        }

        25.00% {
          background-position: -420px -420px;
        }

        33.33% {
          background-image: url("https://gw.alicdn.com/imgextra/i1/O1CN0150XXvB246EEn0UXZM_!!6000000007341-2-tps-840-840.png");
          background-position: 0px 0px;
        }

        41.67% {
          background-position: -420px 0px;
        }

        50.00% {
          background-position: 0px -420px;
        }

        58.33% {
          background-position: -420px -420px;
        }

        66.67% {
          background-image: url("https://gw.alicdn.com/imgextra/i3/O1CN01LmBZas1jxGAMdzD8T_!!6000000004614-2-tps-840-840.png");
          background-position: 0px 0px;
        }

        75.00% {
          background-position: -420px 0px;
        }

        83.33% {
          background-position: 0px -420px;
        }

        91.67%,
        100% {
          background-position: -420px -420px;
        }
      }
    </style>
  </head>
  <body>
    <div class="loading"></div>
    <div class="bg"></div>
  </body>
</html>

 

posted @ 2021-11-29 15:35  喻佳文  阅读(180)  评论(0)    收藏  举报