好玩的 css3 动画效果，持续更新中，欢迎关注

1. 单弧转圈效果

    

     

      

    

.container{
  position: fixed;
  z-index: 100000;
  width: 15vh;
  height:15vh;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #eee;
}
.circle{
   // transition: all .3s ease;
   position: relative;
   margin:auto 0;
   width: 4vh;
   height: 4vh;
 }
 .loading{
   width: 100%;
   height: 100%;
   border-top:2px solid #eee;
   border-left:2px solid #eee;
   border-radius: 100% 0 0;
   animation: circles 1s cubic-bezier(1, -0.57, 0.36, 1.46) infinite;
   position: absolute;
   left:-50%;
   top: -50%;
   transform: translate(-50%,-50%);
   transform-origin: 100% 100%;
 }
 // overflow: hidden;
  @-webkit-keyframes circles {
    0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100%{
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes circles {
    0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100%{
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

2.手风琴波动效果

    

        

        

        

        

        

        

        

    

.container{
  position: fixed;
  z-index: 100000;
  width: 15vh;
  height:15vh;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #eee;
}
.accordion {
    margin: 0 auto;
    width: 70px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    
  }
  .accordion div {
    background-color: #eee;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: accordion 1s infinite ease-in-out;
    animation: accordion 1s infinite ease-in-out;
    
  }
  .accordion div:nth-child(2n){
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .accordion div:nth-child(3n){
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .accordion div:nth-child(4n){
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.3s;
  }
  .accordion div:nth-child(5n){
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
  }
  .accordion div:nth-child(6n){
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  .accordion div:nth-child(7n){
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  @-webkit-keyframes accordion {
    0%,100% { 
      -webkit-transform: scaleY(0.1) 
    } 
    50% { 
      -webkit-transform: scaleY(1.0) 
    }
  }
  @keyframes accordion {
    0%,100% {
      transform: scaleY(0.1);
      -webkit-transform: scaleY(0.1);
    } 
    50% {
      transform: scaleY(1.0);
      -webkit-transform: scaleY(1.0);
    }
  }

3. 双圆放大缩小转动效果

    

       

       

     

.container{
  position: fixed;
  z-index: 100000;
  width: 15vh;
  height:15vh;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #eee;
}
.rotate-circle {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    position: relative;
    text-align: center;
    -webkit-animation: rotate-circle 2.0s infinite linear;
    animation: rotate-circle 2.0s infinite linear;
  }
 .rotate-circle .dot1, .dot2 {
     width: 60%;
     height: 60%;
     display: inline-block;
     position: absolute;
     top: 0;
     background-color: #eee;
     border-radius: 100%;
     -webkit-animation: rotate-circle-bounce 2.0s infinite ease-in-out;
     animation: rotate-circle-bounce 2.0s infinite ease-in-out;
   }
 .rotate-circle .dot2 {
     top: auto;
     bottom: 0px;
     -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
   }
   @-webkit-keyframes rotate-circle { 
     100% { -webkit-transform: rotate(360deg) }
   }
   @keyframes rotate-circle { 
     100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }
   }
   @-webkit-keyframes rotate-circle-bounce {
     0%, 100% { -webkit-transform: scale(0.0) }
     50% { -webkit-transform: scale(1.0) }
   }
   @keyframes rotate-circle-bounce {
     0%, 100% {
       transform: scale(0.0);
       -webkit-transform: scale(0.0);
     } 50% {
     transform: scale(1.0);
     -webkit-transform: scale(1.0);
     }
   }

4. 多圆延迟放大缩小效果

    

          

          

          

          

    

.container{
  position: fixed;
  z-index: 100000;
  width: 15vh;
  height:15vh;
  left:50%;
  top:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #eee;
}
.scale-circle div {
    width: 10px;
    height: 10px;
    background-color: #eee;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: scale-circle 1s infinite ease-in-out;
    animation: scale-circle 1s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: -0s;
    animation-delay: -0s;
}
.scale-circle div:nth-child(2n){
   -webkit-animation-delay: -.1s;
   animation-delay: -.1s;
 }
.scale-circle div:nth-child(3n) {
  -webkit-animation-delay: -.2s;
  animation-delay: -.2s;
}
.scale-circle div:nth-child(4n) {
  -webkit-animation-delay: -.3s;
  animation-delay: -.3s;
}
@-webkit-keyframes scale-circle {
   0%, 80%, 100% { -webkit-transform: scale(0.0) }
   40% { -webkit-transform: scale(1.0) }
 }
@keyframes scale-circle {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 
  40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

更多详细知识介绍请访问我的个人主页