美文网首页
css loading加载动画

css loading加载动画

作者: 如果俞天阳会飞 | 来源:发表于2019-11-18 14:25 被阅读0次
    <div class="wrap">
        <div class="cover">
            <p class="hint">error</p>
        </div>
        <div class="spinner">
            <div class="spinner_load">
                <div class="bounce bounce1"></div>
                <div class="bounce bounce2"></div>
                <div class="bounce bounce3"></div>
            </div>
        </div>
    </div>
    
    html,body
      background-color transparent
      overflow-x hidden
        .cover
          display none
          position fixed
          width 100%
          height 100%
          top: 0
          left 0
          z-index 99999
          touch-action none
          background-color: rgba(0,0,0,0.7)
          .hint
            position absolute
            width 88%
            padding 20px 0
            top 50%
            left 50%
            margin-top (-@height/2)px
            margin-left -(@width/2)%
            word-wrap break-word
            border-radius 20px
            font-size 28px
            background-color #666666
            text-align center
            color #ffffff
    
    .spinner
      // display none
      position fixed
      left 0
      top 0
      z-index 999
      width 100%
      height 100%
      touch-action none
      background-color: rgba(0,0,0,0.7)
      text-align center
      .spinner_load
        position absolute
        top 50%
        left 50%
        transform translate(-50%,-50%)
      .bounce
        width: 30px
        height: 30px
        background-color: #ffc363
        border-radius: 100%
        display: inline-block
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out
        animation: bouncedelay 1.4s infinite ease-in-out
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both
        animation-fill-mode: both
      .bounce1
        -webkit-animation-delay: -0.32s
        animation-delay: -0.32s
      .bounce2
        -webkit-animation-delay: -0.16s
        animation-delay: -0.16s
    @-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);
      }
    }
    

    相关文章

      网友评论

          本文标题:css loading加载动画

          本文链接:https://www.haomeiwen.com/subject/ntxbictx.html