css加载中动画效果

r囧r小猫 2022-09-07 12:27 248阅读 0赞

[转载自大佬][Link 1]  
效果一:  
![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png]

html代码：

CSS代码

.spinner { 
      margin: 100px auto;
      width: 50px;
      height: 60px;
      text-align: center;
      font-size: 10px;
    }
     
    .spinner > div { 
      background-color: #67CF22;
      height: 100%;
      width: 6px;
      display: inline-block;
       
      -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
      animation: stretchdelay 1.2s infinite ease-in-out;
    }
     
    .spinner .rect2 { 
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
     
    .spinner .rect3 { 
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    .spinner .rect4 { 
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    .spinner .rect5 { 
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
     
    @-webkit-keyframes stretchdelay { 
      0%, 40%, 100% {  -webkit-transform: scaleY(0.4) } 
      20% {  -webkit-transform: scaleY(1.0) }
    }
     
    @keyframes stretchdelay { 
      0%, 40%, 100% { 
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }  20% { 
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }

效果二：  
![在这里插入图片描述][769670aec4df4a26b61993e031063857.png]  
HTML代码：

CSS代码：

.spinner { 
      width: 60px;
      height: 60px;
      background-color: #67CF22;
     
      margin: 100px auto;
      -webkit-animation: rotateplane 1.2s infinite ease-in-out;
      animation: rotateplane 1.2s infinite ease-in-out;
    }
     
    @-webkit-keyframes rotateplane { 
      0% {  -webkit-transform: perspective(120px) }
      50% {  -webkit-transform: perspective(120px) rotateY(180deg) }
      100% {  -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }
     
    @keyframes rotateplane { 
      0% { 
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
      } 50% { 
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% { 
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }

效果三![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkX2xqcA_size_16_color_FFFFFF_t_70]  
HTML 代码：

CSS 代码：

.spinner { 
      width: 60px;
      height: 60px;
     
      position: relative;
      margin: 100px auto;
    }
     
    .double-bounce1, .double-bounce2 { 
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #67CF22;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
       
      -webkit-animation: bounce 2.0s infinite ease-in-out;
      animation: bounce 2.0s infinite ease-in-out;
    }
     
    .double-bounce2 { 
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    @-webkit-keyframes bounce { 
      0%, 100% {  -webkit-transform: scale(0.0) }
      50% {  -webkit-transform: scale(1.0) }
    }
     
    @keyframes bounce { 
      0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }

效果四：  
![在这里插入图片描述][3139c4159a164db4908f072fd60eaad8.png]  
HTML 代码：

CSS 代码：

.spinner { 
      margin: 100px auto;
      width: 32px;
      height: 32px;
      position: relative;
    }
     
    .cube1, .cube2 { 
      background-color: #67CF22;
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
      left: 0;
       
      -webkit-animation: cubemove 1.8s infinite ease-in-out;
      animation: cubemove 1.8s infinite ease-in-out;
    }
     
    .cube2 { 
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    @-webkit-keyframes cubemove { 
      25% {  -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
      50% {  -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
      75% {  -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
      100% {  -webkit-transform: rotate(-360deg) }
    }
     
    @keyframes cubemove { 
      25% { 
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
      } 50% { 
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
      } 50.1% { 
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
      } 75% { 
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
      } 100% { 
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
      }
    }

效果五：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkX2xqcA_size_16_color_FFFFFF_t_70 1]

HTML 代码：

CSS 代码：

.spinner { 
      margin: 100px auto;
      width: 90px;
      height: 90px;
      position: relative;
      text-align: center;
       
      -webkit-animation: rotate 2.0s infinite linear;
      animation: rotate 2.0s infinite linear;
    }
     
    .dot1, .dot2 { 
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #67CF22;
      border-radius: 100%;
       
      -webkit-animation: bounce 2.0s infinite ease-in-out;
      animation: bounce 2.0s infinite ease-in-out;
    }
     
    .dot2 { 
      top: auto;
      bottom: 0px;
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    @-webkit-keyframes rotate {  100% {  -webkit-transform: rotate(360deg) }}
    @keyframes rotate {  100% {  transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
     
    @-webkit-keyframes bounce { 
      0%, 100% {  -webkit-transform: scale(0.0) }
      50% {  -webkit-transform: scale(1.0) }
    }
     
    @keyframes bounce { 
      0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }

效果六  
![在这里插入图片描述][67bddf837d3c4e3daec7bbe34ed5ebe9.png]  
HTML 代码：

CSS 代码：

.spinner { 
      margin: 100px auto 0;
      width: 150px;
      text-align: center;
    }
     
    .spinner > div { 
      width: 30px;
      height: 30px;
      background-color: #67CF22;
     
      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;
    }
     
    .spinner .bounce1 { 
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
     
    .spinner .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);
      }
    }

效果七  
![在这里插入图片描述][8433beb0867047f68e7250722d12789f.png]  
HTML 代码：

CSS 代码：

.spinner { 
      width: 40px;
      height: 40px;
      margin: 100px auto;
      background-color: #333;
     
      border-radius: 100%; 
      -webkit-animation: scaleout 1.0s infinite ease-in-out;
      animation: scaleout 1.0s infinite ease-in-out;
    }
     
    @-webkit-keyframes scaleout { 
      0% {  -webkit-transform: scale(0.0) }
      100% { 
        -webkit-transform: scale(1.0);
        opacity: 0;
      }
    }
     
    @keyframes scaleout { 
      0% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 100% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        opacity: 0;
      }
    }

效果八  
![在这里插入图片描述][5c92a1b1ec464ea896d226de5dac3ea2.png]  
HTML 代码：

CSS 代码：

.spinner { 
      margin: 100px auto;
      width: 20px;
      height: 20px;
      position: relative;
    }
     
    .container1 > div, .container2 > div, .container3 > div { 
      width: 6px;
      height: 6px;
      background-color: #333;
     
      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);
      }
    }

[转载自大佬][Link 1]

[Link 1]: https://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
[88253320a6ab4a489d6b1317add231e5.png]: /images/20220829/a983decbda2646cbb2195d7458fb8edd.png
[769670aec4df4a26b61993e031063857.png]: /images/20220829/03d05eceac0446a29564270d8486bc64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkX2xqcA_size_16_color_FFFFFF_t_70]: /images/20220829/eae43c6d8c164c58af41449de27ac235.png
[3139c4159a164db4908f072fd60eaad8.png]: /images/20220829/5517f91386514b8da9b0a48a4144049a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FkX2xqcA_size_16_color_FFFFFF_t_70 1]: /images/20220829/6ab900996a3b406a94640092766638d4.png
[67bddf837d3c4e3daec7bbe34ed5ebe9.png]: /images/20220829/be6ebb7f9e5d4e03a3c9dffd396618dc.png
[8433beb0867047f68e7250722d12789f.png]: /images/20220829/892003d3c544421a9f1d7e20a0e8fc86.png
[5c92a1b1ec464ea896d226de5dac3ea2.png]: /images/20220829/25e8fddb95cd40bb8addd335b7b88d00.png