CSS加載動畫【聲波動畫】示例初探

CSS加載動畫是在網頁加載過程中顯示的動畫效果，它讓使用者知道頁面正在加載并且不會感到無聊或者煩躁。

示例1：

<div class="wave-container">
  <div class="wave">
    <div class="bar bar1"></div>
    <div class="bar bar2"></div>
    <div class="bar bar3"></div>
  </div>
</div>

<style type="text/css">
  .wave-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #fff;
}
.wave {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 200px;
  width: 600px;
}
.bar {
  width: 20px;
  height: 70px;
  margin: 0 10px;
  background-color: #333;
  border-radius: 5px;
  animation: wave 1s ease-in-out infinite;
}
.bar1 {
  animation-delay: 0.2s;
  transform-origin: bottom;
}
.bar2 {
  transform-origin: bottom;
}
.bar3 {
  animation-delay: 0.4s;
  transform-origin: bottom;
}
@keyframes wave {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
  100% {
    transform: scaleY(1);
  }
}
</style>           

示例1

• “wave-container”是一個容器，将加載動畫垂直居中并顯示在界面中。
• “wave”是加載動畫的主體容器，将三個聲波條垂直排列并居中。
• “bar”是聲波條的樣式，在“wave”容器中顯示成聲波。
• “bar1”、“bar2”和“bar3”具有不同的動畫延遲和變形原點，以便産生逐漸變形的效果。
• 通過CSS的動畫，聲波條在垂直方向上不斷變形，産生像聲波一樣往外擴散的動畫效果。

示例2：

<div class="loader">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

<style type="text/css">
.loader {
  position: relative;
  width: 50px;
  height: 50px;
}

.bar {
  position: absolute;
  width: 6px;
  height: 20px;
  background-color: #333;
  border-radius: 4px;
  animation: loading 1s ease-in-out infinite;
}
.bar:nth-child(1) {
  left: 0;
  animation-delay: 0s;
}
.bar:nth-child(2) {
  left: 10px;
  animation-delay: 0.1s;
}
.bar:nth-child(3) {
  left: 20px;
  animation-delay: 0.2s;
}
.bar:nth-child(4) {
  left: 30px;
  animation-delay: 0.3s;
}
.bar:nth-child(5) {
  left: 40px;
  animation-delay: 0.4s;
}
@keyframes loading {
  50% {
    height: 5px;
    transform: translateY(-10px); 
  }
}
</style>           

示例2

示例3：

<div class="loader">
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
  <div class="loader__bar"></div>
</div>

<style type="text/css">
body>div{margin-top:5rem;}
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.loader__bar {
  width: 4px;
  height: 24px;
  margin: 0 8px;
  background-color: #000;
  animation: loader__bar 1s ease-in-out infinite;
}

.loader__bar:nth-child(1) {
  animation-delay: -0.96s;
}

.loader__bar:nth-child(2) {
  animation-delay: -0.72s;
}

.loader__bar:nth-child(3) {
  animation-delay: -0.48s;
}

.loader__bar:nth-child(4) {
  animation-delay: -0.24s;
}

.loader__bar:nth-child(5) {
  animation-delay: 0s;
}

@keyframes loader__bar {
  0%, 100% {
    transform: scaleY(0.1);
  }
  50% {
    transform: scaleY(1);
  }
}
</style>           

示例3

示例4：

<div class="loader">
  <div class="loader-bar bar1"></div>
  <div class="loader-bar bar2"></div>
  <div class="loader-bar bar3"></div>
  <div class="loader-bar bar4"></div>
  <div class="loader-bar bar5"></div>
  <div class="loader-bar bar6"></div>
</div>

<style type="text/css">
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loader-bar {
  width: 8px;
  height: 30px;
  margin-right: 10px;
  background: #333;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.bar1 {
  animation-delay: -1.2s;
}

.bar2 {
  animation-delay: -1.1s;
}

.bar3 {
  animation-delay: -1s;
}

.bar4 {
  animation-delay: -0.9s;
}

.bar5 {
  animation-delay: -0.8s;
}

.bar6 {
  animation-delay: -0.7s;
}


@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
  }
}
</style>           

示例4

這段代碼建立一個具有6個長條的加載動畫，每個長條在不同的時間軸上運動，進而形成一個複雜的動畫效果。運用其中keyframes制作的動畫，讓你能夠控制動畫的全部細節，例如播放次數，速度和延遲。

示例5：

<div class="loader">
  <div class="loader-inner">
    <div class="loader-bar bar1"></div>
    <div class="loader-bar bar2"></div>
    <div class="loader-bar bar3"></div>
    <div class="loader-bar bar4"></div>
    <div class="loader-bar bar5"></div>
    <div class="loader-bar bar6"></div>
    <div class="loader-bar bar7"></div>
    <div class="loader-bar bar8"></div>
    <div class="loader-bar bar9"></div>
    <div class="loader-bar bar10"></div>
    <div class="loader-bar bar11"></div>
    <div class="loader-bar bar12"></div>
  </div>
</div>

<style type="text/css">
.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.loader-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
}

.loader-bar {
  width: 5px;
  height: 20px;
  border-radius: 10px;
  margin-right: 2px;
  animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader-bar:nth-child(1) {
  animation-delay: 0s;
}

.loader-bar:nth-child(2) {
  animation-delay: -1.1s;
}

.loader-bar:nth-child(3) {
  animation-delay: -1s;
}

.loader-bar:nth-child(4) {
  animation-delay: -0.9s;
}

.loader-bar:nth-child(5) {
  animation-delay: -0.8s;
}

.loader-bar:nth-child(6) {
  animation-delay: -0.7s;
}

.loader-bar:nth-child(7) {
  animation-delay: -0.6s;
}

.loader-bar:nth-child(8) {
  animation-delay: -0.5s;
}

.loader-bar:nth-child(9) {
  animation-delay: -0.4s;
}

.loader-bar:nth-child(10) {
  animation-delay: -0.3s;
}

.loader-bar:nth-child(11) {
  animation-delay: -0.2s;
}

.loader-bar:nth-child(12) {
  animation-delay: -0.1s;
}

.bar1,.bar2,.bar3,.bar4,
.bar5,.bar6,.bar7,.bar8,
.bar9,.bar10,.bar11,.bar12 {
  background-color: #444;
}

@keyframes loader {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1, 2.3);
  }
  40% {
    transform: scale(1);
  }
}
</style>           

示例5

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

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