如何使用HTML和CSS建立動畫長條圖？

概述

動畫欄是使用 HTML 和 CSS 建立的圖形動畫欄。動畫欄的佈局是使用 HTML 建立的，欄的樣式是使用 CSS 製作的。普通的條形圖可以正常創建，但我們必須創建帶有動畫的條形圖，因此我們將使用 CSS 過渡動畫屬性來使其具有動畫效果。我們將建立一個與音樂動畫條同步器相同的動畫條。

演算法

第 1 步 - 在文字編輯器中建立一個 HTML 檔案並在其中新增 HTML 樣板。

第 2 步 − 現在建立一個包含動畫線條的父親 div 容器。

<div class="animatedLines"></div>

第 3 步 − 在父 div 內建立一個 div 子容器。建立至少七個「div」來製作一個好的動畫欄，並將類別名稱作為線條添加到其中。

<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>
<div class="lines"></div>

第 4 步 − 現在建立一個 style.css 檔案並將該檔案連結到 HTML 文件。

<link rel="stylesheet" href="style.css">

第 5 步− 在 style.css 檔案中設定 HTML 元素的樣式。

.animatedLines {
   display: flex;
   justify-content: center;
   padding-top: 2rem;
}
.animatedLines .lines:nth-child(1) {
   animation-delay: .1s;
   background-color: rgb(141, 255, 88);
}

.animatedLines .lines:nth-child(2) {
   animation-delay: .2s;
   background-color: rgb(127, 253, 69);
}

.animatedLines .lines:nth-child(3) {
   animation-delay: .3s;

   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(4) {
   animation-delay: .4s;
   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(5) {
   animation-delay: .3s;
   background-color: rgb(18, 49, 6);
}

.animatedLines .lines:nth-child(6) {
   animation-delay: .2s;
   background-color: rgb(127, 253, 69);
}

.animatedLines .lines:nth-child(7) {
   animation-delay: .1s;
   background-color: rgb(102, 228, 43);
}

第 6 步 − 透過定位子「div」容器的類別名稱來製作這些線條的動畫。

.animatedLines .lines {
   list-style: none;
   width: 5px;
   height: 10px;
   margin: 0 4px;
   animation: animatedBars .5s infinite alternate;
}

@keyframes animatedBars {
   0% {
      transform: scaleY(1);
   }

   25% {
       transform: scaleY(1);
   }

   50% {
       transform: scaleY(1);
   }

   100% {
       transform: scaleY(6);
   }

}

第 7 步− 動畫條已成功建立。

範例

在此範例中，我們建立了一個動畫欄。為此，我們創建了兩個檔案：index.html 和 style.css。索引檔案包含頁面的佈局，style.css 檔案包含頁面的樣式部分。

   
   <link rel="stylesheet" href="style.css">
   


   
tutorialspoint.com
   

      

      

      

      

      

      

      

      

   

下面給定的圖像顯示了上面範例的輸出，它顯示了一些您可以在瀏覽器上即時看到的動畫線。當用戶將此功能載入到瀏覽器中時，它會顯示一條看起來更有吸引力的動畫線條。

結論

動畫欄的這項功能可以作為圖形介面在語音合成器中使用。您還可以在許多應用程式中看到此組件，例如錄音機和 dj 節拍同步器。上面例子中的主要部分是計時，我們設定了隨著條形尺寸的增加而動畫的計時。

以上是如何使用HTML和CSS建立動畫長條圖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！