手机移动端加载动画-阿里云开发者社区

手机移动端加载动画

2023-09-15 59

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手机移动端加载动画

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>手机移动端加载动画</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      .spinner {
        margin-top: 100px;
        margin-right: auto;
        margin-bottom: 100px;
        margin-left: auto;
        width: 50px;
        height: 50px;
        position: relative;
      }
      .container1>div,
      .container2>div,
      .container3>div {
        width: 12px;
        height: 12px;
        background-color: #00bc12;
        border-radius: 100%;
        position: absolute;
        -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
        animation: bouncedelay 1.2s infinite ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
      .spinner .spinner-container {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .container2 {
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
      }
      .container3 {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
      }
      .circle1 {
        top: 0;
        left: 0;
      }
      .circle2 {
        top: 0;
        right: 0;
      }
      .circle3 {
        right: 0;
        bottom: 0;
      }
      .circle4 {
        left: 0;
        bottom: 0;
      }
      .container2 .circle1 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
      .container3 .circle1 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
      }
      .container1 .circle2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      .container2 .circle2 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
      .container3 .circle2 {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
      }
      .container1 .circle3 {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
      }
      .container2 .circle3 {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
      }
      .container3 .circle3 {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
      }
      .container1 .circle4 {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
      }
      .container2 .circle4 {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
      }
      .container3 .circle4 {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
      }
      @-webkit-keyframes bouncedelay {
        0%,
        80%,
        100% {
          -webkit-transform: scale(0.0)
        }
        40% {
          -webkit-transform: scale(1.0)
        }
      }
      @keyframes bouncedelay {
        0%,
        80%,
        100% {
          transform: scale(0.0);
          -webkit-transform: scale(0.0);
        }
        40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
        }
      }
    </style>
  </head>
  <body>
    <div class="um-win" id="index">
          <div class="um-content">
                <div class="spinner">
                      <div class="spinner-container container1">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                            <div class="circle4"></div>
                        </div>
                      <div class="spinner-container container2">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                            <div class="circle4"></div>
                        </div>
                      <div class="spinner-container container3">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                            <div class="circle4"></div>
                        </div>
                  </div>
             </div>
    </div>
  </body>
</html>

手机移动端加载动画

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

手机移动端加载动画

热门文章

最新文章

相关电子书

相关实验场景