Bagaimana untuk membuat carta bar animasi menggunakan HTML dan CSS?

Gambaran Keseluruhan

Animation Bar ialah bar animasi grafik yang dibuat menggunakan HTML dan CSS. Reka letak bar animasi dibuat menggunakan HTML, dan gaya bar dibuat menggunakan CSS. Carta bar biasa boleh dibuat seperti biasa, tetapi kami perlu mencipta carta bar animasi, jadi kami akan menggunakan sifat animasi peralihan CSS untuk menganimasikannya. Kami akan membina bar animasi yang sama dengan penyegerak bar animasi muzik.

Algoritma

Langkah 1 - Buat fail HTML dalam editor teks dan tambahkan boilerplate HTML di dalamnya.

Langkah 2 − Sekarang buat bekas div induk yang mengandungi garisan animasi.

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

Langkah 3−Buat sub-bekas div dalam div induk. Cipta sekurang-kurangnya tujuh "div" untuk membuat bar animasi yang baik dan tambahkan nama kelas sebagai baris ke dalamnya.

<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>

Langkah 4 − Sekarang buat fail style.css dan pautkan fail itu ke dokumen HTML.

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

Langkah 5− Tetapkan gaya elemen HTML dalam fail style.css.

.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);
}

Langkah 6 − Animasikan baris ini dengan meletakkan nama kelas bekas "div" kanak-kanak.

.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);
   }

}

Langkah 7−Bar animasi telah berjaya dibuat.

Contoh

Dalam contoh ini, kami mencipta bar animasi. Untuk melakukan ini, kami mencipta dua fail: index.html dan style.css. Fail indeks mengandungi reka letak halaman dan fail style.css mengandungi bahagian gaya halaman.

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


   
tutorialspoint.com
   

      

      

      

      

      

      

      

      

   

Imej yang diberikan di bawah menunjukkan output contoh di atas dan ia menunjukkan beberapa baris animasi yang boleh anda lihat secara langsung pada penyemak imbas anda. Apabila pengguna memuatkan ciri ini ke dalam penyemak imbas mereka, ia memaparkan baris animasi yang kelihatan lebih menarik.

Kesimpulan

Ciri bar animasi ini boleh digunakan dalam pensintesis pertuturan sebagai antara muka grafik. Anda juga boleh melihat komponen ini dalam banyak aplikasi seperti perakam audio dan penyegerak rentak dj. Bahagian utama contoh di atas ialah pemasaan, kami menetapkan masa untuk bernyawa apabila saiz bar bertambah.

Atas ialah kandungan terperinci Bagaimana untuk membuat carta bar animasi menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!