zoukankan      html  css  js  c++  java
  • loading

    <div class="loader"></div>

    body {
       100%;
      height: 100vh;
      margin: 0;
    }
    
    .loader {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
       50px;
      height: 50px;
      background-color: #03a9f4;
      border-radius: 50%;
      
      &:after {
        content: '';
        position: absolute;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        border: 0px solid white;
        transform: translate(-50%, -50%);
        animation: loading 1000ms ease-out forwards infinite;
      }
      
    }
    
    @keyframes loading {
      0% {
        border: 0px solid white;
      }
      
      20% {
        border: 8px solid white;
         0%;
        height: 0%;
      }
      
      100% {
        border: 8px solid white;
         100%;
        height: 100%;
      }
    }
    

      

  • 相关阅读:
    每日总结59
    每日总结58
    每日总结57
    每日总结56
    每日总结55
    每日总结54
    每日总结53
    每日总结52
    学习日报
    学习日报
  • 原文地址:https://www.cnblogs.com/freespider/p/9877574.html
Copyright © 2011-2022 走看看