CSS加載動畫【原點擴散動畫】示例初探

CSS3是一個強大的前端開發技術，它可以幫助我們實作許多互動效果。其中，CSS3動畫可以為我們的網站增添生機和活力，并且非常易于使用和調整。

示例1：

<style type="text/css">
  .animation {
  width: 100%;
  height: 100%;
  background-color: #333;
  position: absolute;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.circles {
  width: 150px;
  height: 150px;
  position: relative;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  -webkit-animation: circling 1s infinite;
          animation: circling 1s infinite;
}

.circle:nth-child(2) {
  width: 20px;
  height: 20px;
  left: 55px;
  top: 55px;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.circle:nth-child(3) {
  width: 40px;
  height: 40px;
  left: 35px;
  top: 35px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes circling {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0.0;
  }
}

@keyframes circling {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0.0;
  }
}
 </style>
<div class="animation">
  <div class="circles">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>           

示例2

<style>
    #loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
    }

    .particle {
      border-radius: 50%;
      position: absolute;
      background-color: #000;
      opacity: 0;
      animation: particle 1s linear infinite;
    }

    .particle:nth-child(1) {
      width: 50px;
      height: 50px;
      top: 0;
      left: 0;
      animation-delay: 0s;
    }

    .particle:nth-child(2) {
      width: 50px;
      height: 50px;
      top: 0;
      right: 0;
      animation-delay: 0.2s;
      animation-duration: 1.2s;
    }

    .particle:nth-child(3) {
      width: 50px;
      height: 50px;
      bottom: 0;
      left: 0;
      animation-delay: 0.4s;
      animation-duration: 1.4s;
    }

    .particle:nth-child(4) {
      width: 50px;
      height: 50px;
      bottom: 0;
      right: 0;
      animation-delay: 0.6s;
      animation-duration: 1.6s;
    }

    @keyframes particle {
      0% {
        opacity: 1;
        transform: scale(0);
      }
      100% {
        opacity: 0;
        transform: scale(1);
      }
    }
  </style>
<div id="loader">
  <div class="particle"> </div>
  <div class="particle"> </div>
  <div class="particle"> </div>
  <div class="particle"> </div>
</div>           

通過上面的代碼，我們建立出一個由4個粒子組成的加載動畫，每個粒子都有一個不同的動畫延遲時間和動畫持續時間。在這個示例中，粒子最初呈現為不透明，透明度從1到0，同時縮放從0到1，是以看起來像是從中心炸開的一些黑點。

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的浏覽，我們一起加油吧。