【css | loading】各种简单的loading特效

于 2023-09-14 15:52:23 发布
阅读量352 收藏 5
点赞数 2
分类专栏： css 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43340372/article/details/132880347
版权

先看一下简单的效果图

 线上预览

https://code.juejin.cn/pen/7278511766991339579

代码

HTML

 <!-- / 1 -->
    <section>
      <div class="sk-rotating-plane"></div>
    </section>
    <!-- / 2 -->
    <section>
      <div class="sk-double-bounce">
        <div class="sk-child sk-double-bounce-1"></div>
        <div class="sk-child sk-double-bounce-2"></div>
      </div>
    </section>
    <!-- / 3 -->
    <section>
      <div class="sk-wave">
        <div class="sk-rect sk-rect-1"></div>
        <div class="sk-rect sk-rect-2"></div>
        <div class="sk-rect sk-rect-3"></div>
        <div class="sk-rect sk-rect-4"></div>
        <div class="sk-rect sk-rect-5"></div>
      </div>
    </section>
    <!-- / 4 -->
    <section>
      <div class="sk-wandering-cubes">
        <div class="sk-cube sk-cube-1"></div>
        <div class="sk-cube sk-cube-2"></div>
      </div>
    </section>
    <!-- / 5 -->
    <section>
      <div class="sk-spinner sk-spinner-pulse"></div>
    </section>
    <!-- / 6 -->
    <section>
      <div class="sk-chasing-dots">
        <div class="sk-child sk-dot-1"></div>
        <div class="sk-child sk-dot-2"></div>
      </div>
    </section>
    <!-- / 7 -->
    <section>
      <div class="sk-three-bounce">
        <div class="sk-bounce-1 sk-child"></div>
        <div class="sk-bounce-2 sk-child"></div>
        <div class="sk-bounce-3 sk-child"></div>
      </div>
    </section>
    <!-- / 8 -->
    <section>
      <div class="sk-circle-bounce">
        <div class="sk-child sk-circle-1"></div>
        <div class="sk-child sk-circle-2"></div>
        <div class="sk-child sk-circle-3"></div>
        <div class="sk-child sk-circle-4"></div>
        <div class="sk-child sk-circle-5"></div>
        <div class="sk-child sk-circle-6"></div>
        <div class="sk-child sk-circle-7"></div>
        <div class="sk-child sk-circle-8"></div>
        <div class="sk-child sk-circle-9"></div>
        <div class="sk-child sk-circle-10"></div>
        <div class="sk-child sk-circle-11"></div>
        <div class="sk-child sk-circle-12"></div>
      </div>
    </section>
    <!-- / 9 -->
    <section>
      <div class="sk-cube-grid">
        <div class="sk-cube sk-cube-1"></div>
        <div class="sk-cube sk-cube-2"></div>
        <div class="sk-cube sk-cube-3"></div>
        <div class="sk-cube sk-cube-4"></div>
        <div class="sk-cube sk-cube-5"></div>
        <div class="sk-cube sk-cube-6"></div>
        <div class="sk-cube sk-cube-7"></div>
        <div class="sk-cube sk-cube-8"></div>
        <div class="sk-cube sk-cube-9"></div>
      </div>
    </section>
    <!-- / 10 -->
    <section>
      <div class="sk-fading-circle">
        <div class="sk-circle sk-circle-1"></div>
        <div class="sk-circle sk-circle-2"></div>
        <div class="sk-circle sk-circle-3"></div>
        <div class="sk-circle sk-circle-4"></div>
        <div class="sk-circle sk-circle-5"></div>
        <div class="sk-circle sk-circle-6"></div>
        <div class="sk-circle sk-circle-7"></div>
        <div class="sk-circle sk-circle-8"></div>
        <div class="sk-circle sk-circle-9"></div>
        <div class="sk-circle sk-circle-10"></div>
        <div class="sk-circle sk-circle-11"></div>
        <div class="sk-circle sk-circle-12"></div>
      </div>
    </section>
    <!-- / 11 -->
    <section>
      <div class="sk-folding-cube">
        <div class="sk-cube sk-cube-1"></div>
        <div class="sk-cube sk-cube-2"></div>
        <div class="sk-cube sk-cube-4"></div>
        <div class="sk-cube sk-cube-3"></div>
      </div>
    </section>
    <section></section>

 css

 body {
    background-color: rgba(0, 0, 0, 0.9);
    min-height: 95vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
  }

  section {
    flex: 1 1 25%;
  }

  .sk-rotating-plane {
    width: 4em;
    height: 4em;
    margin: auto;
    background-color: #337ab7;
    -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
    animation: sk-rotating-plane 1.2s infinite ease-in-out;
  }

  @-webkit-keyframes sk-rotating-plane {
    0% {
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }

  @keyframes sk-rotating-plane {
    0% {
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50% {
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
  .sk-double-bounce {
    width: 4em;
    height: 4em;
    position: relative;
    margin: auto;
  }
  .sk-double-bounce .sk-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #337ab7;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-double-bounce 2s infinite ease-in-out;
    animation: sk-double-bounce 2s infinite ease-in-out;
  }
  .sk-double-bounce .sk-double-bounce-2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  @-webkit-keyframes sk-double-bounce {
    0%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes sk-double-bounce {
    0%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .sk-wave {
    width: 6em;
    height: 4em;
    margin: auto;
    text-align: center;
    font-size: 1em;
  }
  .sk-wave .sk-rect {
    background-color: #337ab7;
    height: 100%;
    width: 0.5em;
    display: inline-block;
    -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
    animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
  }
  .sk-wave .sk-rect-1 {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .sk-wave .sk-rect-2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .sk-wave .sk-rect-3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  .sk-wave .sk-rect-4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  .sk-wave .sk-rect-5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }

  @-webkit-keyframes sk-wave-stretch-delay {
    0%,
    40%,
    100% {
      -webkit-transform: scaleY(0.4);
      transform: scaleY(0.4);
    }
    20% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }

  @keyframes sk-wave-stretch-delay {
    0%,
    40%,
    100% {
      -webkit-transform: scaleY(0.4);
      transform: scaleY(0.4);
    }
    20% {
      -webkit-transform: scaleY(1);
      transform: scaleY(1);
    }
  }
  .sk-wandering-cubes {
    width: 4em;
    height: 4em;
    position: relative;
    margin: auto;
  }
  .sk-wandering-cubes .sk-cube {
    background-color: #337ab7;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
    animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
  }
  .sk-wandering-cubes .sk-cube-2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  @-webkit-keyframes sk-wandering-cubes {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    25% {
      -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
      transform: translateX(2em) rotate(-90deg) scale(0.5);
    }
    50% {
      /* Hack to make FF rotate in the right direction */
      -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
      transform: translateX(2em) translateY(2em) rotate(-179deg);
    }
    50.1% {
      -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
      transform: translateX(2em) translateY(2em) rotate(-180deg);
    }
    75% {
      -webkit-transform: translateX(0) translateY(2em) rotate(-270deg)
        scale(0.5);
      transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
    }
    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }

  @keyframes sk-wandering-cubes {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    25% {
      -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
      transform: translateX(2em) rotate(-90deg) scale(0.5);
    }
    50% {
      /* Hack to make FF rotate in the right direction */
      -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
      transform: translateX(2em) translateY(2em) rotate(-179deg);
    }
    50.1% {
      -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
      transform: translateX(2em) translateY(2em) rotate(-180deg);
    }
    75% {
      -webkit-transform: translateX(0) translateY(2em) rotate(-270deg)
        scale(0.5);
      transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
    }
    100% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
  .sk-spinner-pulse {
    width: 4em;
    height: 4em;
    margin: auto;
    background-color: #337ab7;
    border-radius: 100%;
    -webkit-animation: sk-spinner-pulse 1s infinite ease-in-out;
    animation: sk-spinner-pulse 1s infinite ease-in-out;
  }

  @-webkit-keyframes sk-spinner-pulse {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }

  @keyframes sk-spinner-pulse {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  .sk-chasing-dots {
    width: 4em;
    height: 4em;
    position: relative;
    margin: auto;
    text-align: center;
    -webkit-animation: sk-chasing-dots-rotate 2s infinite linear;
    animation: sk-chasing-dots-rotate 2s infinite linear;
  }
  .sk-chasing-dots .sk-child {
    width: 2em;
    height: 2em;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #337ab7;
    border-radius: 100%;
    -webkit-animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
    animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
  }
  .sk-chasing-dots .sk-dot-2 {
    top: auto;
    bottom: 0;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  @-webkit-keyframes sk-chasing-dots-rotate {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes sk-chasing-dots-rotate {
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes sk-chasing-dots-bounce {
    0%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes sk-chasing-dots-bounce {
    0%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .sk-three-bounce {
    width: 8em;
    margin: auto;
    text-align: center;
  }
  .sk-three-bounce .sk-child {
    width: 2em;
    height: 2em;
    background-color: #337ab7;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
  }
  .sk-three-bounce .sk-bounce-1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .sk-three-bounce .sk-bounce-2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }

  @-webkit-keyframes sk-three-bounce {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes sk-three-bounce {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .sk-circle-bounce {
    width: 4em;
    height: 4em;
    position: relative;
    margin: auto;
  }
  .sk-circle-bounce .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .sk-circle-bounce .sk-child:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #337ab7;
    border-radius: 100%;
    -webkit-animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
    animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
  }
  .sk-circle-bounce .sk-circle-2 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  .sk-circle-bounce .sk-circle-3 {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  .sk-circle-bounce .sk-circle-4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .sk-circle-bounce .sk-circle-5 {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
  .sk-circle-bounce .sk-circle-6 {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  .sk-circle-bounce .sk-circle-7 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .sk-circle-bounce .sk-circle-8 {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
  }
  .sk-circle-bounce .sk-circle-9 {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
  }
  .sk-circle-bounce .sk-circle-10 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .sk-circle-bounce .sk-circle-11 {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
  }
  .sk-circle-bounce .sk-circle-12 {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
  }
  .sk-circle-bounce .sk-circle-2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .sk-circle-bounce .sk-circle-3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  .sk-circle-bounce .sk-circle-4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  .sk-circle-bounce .sk-circle-5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
  .sk-circle-bounce .sk-circle-6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
  }
  .sk-circle-bounce .sk-circle-7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
  }
  .sk-circle-bounce .sk-circle-8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
  }
  .sk-circle-bounce .sk-circle-9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
  }
  .sk-circle-bounce .sk-circle-10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
  }
  .sk-circle-bounce .sk-circle-11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
  }
  .sk-circle-bounce .sk-circle-12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }

  @-webkit-keyframes sk-circle-bounce-delay {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes sk-circle-bounce-delay {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    40% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .sk-cube-grid {
    width: 4em;
    height: 4em;
    margin: auto;
    /*
     * Spinner positions
     * 1 2 3
     * 4 5 6
     * 7 8 9
     */
  }
  .sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #337ab7;
    float: left;
    -webkit-animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
    animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
  }
  .sk-cube-grid .sk-cube-1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .sk-cube-grid .sk-cube-2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .sk-cube-grid .sk-cube-3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  .sk-cube-grid .sk-cube-4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  .sk-cube-grid .sk-cube-5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  .sk-cube-grid .sk-cube-6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .sk-cube-grid .sk-cube-7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .sk-cube-grid .sk-cube-8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  .sk-cube-grid .sk-cube-9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }

  @-webkit-keyframes sk-cube-grid-scale-delay {
    0%,
    70%,
    100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
    }
    35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
  }

  @keyframes sk-cube-grid-scale-delay {
    0%,
    70%,
    100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
    }
    35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
  }
  .sk-fading-circle {
    width: 4em;
    height: 4em;
    position: relative;
    margin: auto;
  }
  .sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .sk-fading-circle .sk-circle:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: #337ab7;
    border-radius: 100%;
    -webkit-animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
    animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
  }
  .sk-fading-circle .sk-circle-2 {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  .sk-fading-circle .sk-circle-3 {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  .sk-fading-circle .sk-circle-4 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .sk-fading-circle .sk-circle-5 {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
  .sk-fading-circle .sk-circle-6 {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
  }
  .sk-fading-circle .sk-circle-7 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .sk-fading-circle .sk-circle-8 {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
  }
  .sk-fading-circle .sk-circle-9 {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
  }
  .sk-fading-circle .sk-circle-10 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .sk-fading-circle .sk-circle-11 {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
  }
  .sk-fading-circle .sk-circle-12 {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
  }
  .sk-fading-circle .sk-circle-2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .sk-fading-circle .sk-circle-3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  .sk-fading-circle .sk-circle-4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  .sk-fading-circle .sk-circle-5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }
  .sk-fading-circle .sk-circle-6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
  }
  .sk-fading-circle .sk-circle-7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
  }
  .sk-fading-circle .sk-circle-8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
  }
  .sk-fading-circle .sk-circle-9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
  }
  .sk-fading-circle .sk-circle-10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
  }
  .sk-fading-circle .sk-circle-11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
  }
  .sk-fading-circle .sk-circle-12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }

  @-webkit-keyframes sk-fading-circle-delay {
    0%,
    39%,
    100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }

  @keyframes sk-fading-circle-delay {
    0%,
    39%,
    100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }
  .sk-folding-cube {
    width: 4em;
    height: 4em;
    position: relative;
    margin: auto;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
  }
  .sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .sk-folding-cube .sk-cube:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #337ab7;
    -webkit-animation: sk-folding-cube-angle 2.4s infinite linear both;
    animation: sk-folding-cube-angle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  .sk-folding-cube .sk-cube-2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
  }
  .sk-folding-cube .sk-cube-3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
  }
  .sk-folding-cube .sk-cube-4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
  }
  .sk-folding-cube .sk-cube-2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  .sk-folding-cube .sk-cube-3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
  }
  .sk-folding-cube .sk-cube-4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
  }

  @-webkit-keyframes sk-folding-cube-angle {
    0%,
    10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
      transform: perspective(140px) rotateX(-180deg);
      opacity: 0;
    }
    25%,
    75% {
      -webkit-transform: perspective(140px) rotateX(0deg);
      transform: perspective(140px) rotateX(0deg);
      opacity: 1;
    }
    90%,
    100% {
      -webkit-transform: perspective(140px) rotateY(180deg);
      transform: perspective(140px) rotateY(180deg);
      opacity: 0;
    }
  }

  @keyframes sk-folding-cube-angle {
    0%,
    10% {
      -webkit-transform: perspective(140px) rotateX(-180deg);
      transform: perspective(140px) rotateX(-180deg);
      opacity: 0;
    }
    25%,
    75% {
      -webkit-transform: perspective(140px) rotateX(0deg);
      transform: perspective(140px) rotateX(0deg);
      opacity: 1;
    }
    90%,
    100% {
      -webkit-transform: perspective(140px) rotateY(180deg);
      transform: perspective(140px) rotateY(180deg);
      opacity: 0;
    }
  }

好喝的西北风
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css3实现加载loading特效小动画效果
06-12
描述： css3代码与js插件一同实现的loading效果 原理比较简单，效果也比较好看 因使用较少，本案例暂只提供观赏 这里就不解释如何使用了
实现10种简单的loading效果
欢迎来到iceseasyh的博客
10-20 2452
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> .loading{ width: 80px; .
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
最新发布
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
【技巧】css loading 加载中动画特效39种
zuncle的博客
03-17 6858
演示效果如下图： HTML代码如下：<h1> CSS LOADERS </h1> <div class="box"> loader-01 <div class="loader-01"> </div> </div> <div class="box"> loader-02 <div class="loader-02"> </div> </div> <div class=
css实现loading,CSS3 19种LOADING（加载）动效
weixin_31220971的博客
08-03 873
CSS语言：CSSSCSS确定body {background: #323943;text-align: center;width: 960px;max-width: 100%;margin: 0 auto;box-sizing: border-box;font-family: sans-serif;color: rgba(200, 200, 200, 0.5);}body *,body *:be...
css实现多个loading动画效果
温情
12-13 2586
在开发中，为了提高用户体验，通常在加载数据的时候会给一个。根据序号查看代码，尾部有整合代码。提示，这里分享几个简单的。
纯CSS3文字Loading动画特效
06-24
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画。
CSS3 Loading文字拆分滚动加载动画特效
06-11
基于CSS3 animation属性制作的Loading文字拆分滚动加载动画特效，蓝色渐变页面背景，Loading文字在网页中间。
CSS3 Loading英文字母加载特效
06-24
CSS3 Loading英文字母加载特效是一款纯css3彩色放大缩小loading文字打字效果加载动画特效。
CSS3蓝色渐变背景Loading特效
06-24
CSS3蓝色渐变背景Loading特效是一款蓝色渐变背景动画和loading加载页面跳转动画特效。
发光Loading加载特效特效代码
03-20
发光Loading加载特效是一款与众不同的CSS3 Loading动画效果，它是由几个不同的动画效果组合而成的，像文字打印效果、发光效果、飞入飞出效果，这几种效果都非常酷。
纯css3写的loading动画特效（28）
12-19
全部用css3写的加载loading动画特效，不需要一行js代码。代码节选： 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } 45% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.7; } 80% { -webkit-transform: scale(1);
科技感十足Loading加载特效.zip
07-04
科技感十足Loading加载特效是一款黑色背景明暗变化loading网页加载动画特效。
多种多样的Loading特效
weixin_30768661的博客
06-15 76
每次打开一些新闻客服端等APP都会看到很有特色的loading特效，就好奇用前端的知识该怎么去实现，本来以为要花挺长时间，不过明白了原理之后就很快搞定了。大多数的特效原理都是想通的，所以就上了四种特效，代码可能写的比较粗糙，大家多多理解，相互学习。（并未兼容IE浏览器哦）。 第一种特效： 1 <div id="loading_1"> 2 <div c...
8种CSS实现loading加载特效的小技巧（分享）
qq_43067585的博客
05-27 4803
本篇文章给大家分享8种CSS实现loading加载特效的小技巧，希望对大家有所帮助！ 为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是UI框架中自带，要么就是百度，然后CV到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了CV工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。（学习视频分享：css视频教程、web前端） 本文只介绍圈形加载。其他的会在其他文章中介绍。 loader-1 这应该是最简单的CSS加载了。在圆圈上有
19种loading css汇总
fkxiaomao96的博客
06-10 247
loading 汇总 链接: CSS3 19种LOADING（加载）. <!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, initia
动画实现简洁 loading 效果
u011200562的博客
03-29 214
实现一个非常简洁的 loading 效果 .loading:after { display: inline-block; overflow: hidden; vertical-align: bottom; content: "\2026"; -webkit-animation: ellipsis 2s infinite; } // 动画部分 @-webkit-keyframe...
简单loading
kangmingyaner的博客
08-30 426
本文章示例了一个简单的loading 功能。 body中添加一个空的div,并赋值一个id. html:   div id="lodeDiv"> js: var _LoadingHtml=null; //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = d
CSS 实现各种 Loading 效果
猿男孩的博客
06-16 5044
CSS 实现各种 Loading 效果 效果实现： 这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下。...
css loading
05-19
CSS loading refers to the process of loading and rendering CSS files on a web page. CSS (Cascading Style Sheets) is used to style and layout web pages, and it is important that it is loaded ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好喝的西北风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值