Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?-html tutorial-php.cn

Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?

PHPz

Lepaskan： 2023-08-28 10:21:06

ke hadapan

1076 orang telah melayarinya

Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?

Animasi bola melekit ialah animasi yang dibuat menggunakan HTML dan CSS. Gaya animasi ini dicipta dengan menggunakan kerangka utama untuk menentukan nilai sifat CSS pada titik yang berbeza dalam animasi, dan kemudian menggunakan animasi pada elemen HTML.

#🎜🎜 #Gooey balls ialah gaya animasi yang popular dan menarik secara visual yang dibuat menggunakan HTML dan CSS. Dalam animasi ini, kami mencipta kesan licin, cecair dan anjal untuk objek bulat, menjadikannya kelihatan seperti bola yang diperbuat daripada lendir. Jenis animasi ini ialah cara yang bagus untuk menambah minat dan daya tarikan pada tapak web anda. Dengan langkah-langkah berikut, kami boleh membuat animasi bola melekit dalam HTML dan CSS dengan mudah.

Langkah 1 - Buat kod HTML untuk animasi bola melekit

Pertama, kami mencipta struktur HTML yang digunakan untuk mencipta animasi bola melekit.

Langkah 2 - Tambah gaya CSS

Dalam langkah ini, kami menambah gaya css pada bola untuk menjadikannya kelihatan seperti bulatan. Untuk mencipta bola, kami menetapkan lebar dan ketinggian bola dan menetapkan jejari sempadan kepada 50% untuk menjadikannya bulat.

Langkah 3: Cipta bingkai utama

Di sini kami akan mencipta bingkai utama untuk animasi. Kerangka kunci digunakan untuk menentukan nilai sifat CSS pada titik yang berbeza dalam animasi.

Langkah 4: Gunakan animasi

Akhir sekali, kami menggunakan animasi pada bola.

Dengan langkah mudah ini, kami boleh mencipta animasi bola melekit asas menggunakan HTML dan CSS dengan mudah. Kami boleh menyesuaikan animasi dengan menukar nilai sifat CSS, bingkai utama, dan pemasaan animasi.

Contoh 1

Animasi bola melekit dengan perubahan warna latar belakang.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 50vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background-color: #40e0d0;
      }
      @keyframes gooey {
         0% { transform: scale(1); background-color: #40e0d0; }
         50% { transform: scale(1.5); background-color: #ff00ff; }
         100% { transform: scale(1); background-color: #40e0d0; }
      }
      .ball {
         animation: gooey 2s infinite ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with Background Color Change</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami mencipta bola yang terus berulang.

Contoh 2

Berikut ialah contoh penggunaan HTML dan CSS untuk mencipta animasi bola melekit dengan bola melantun.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 70vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background:radial-gradient(yellow, green, red);
      }
      @keyframes jump {
         0% {transform: translateY(0);}
         50% {transform: translateY(-50px);}
         100% {transform: translateY(0);}
      }
      .ball {
         animation: gooey 2s infinite ease-in-out, jump 2s infinite
         ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with a Jumping ball</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami mentakrifkan melekit dan melompat dua bingkai utama. Kerangka kunci berlendir menghidupkan skala bola daripada saiz asalnya kepada 1.5 kali ganda saiz asal dan belakang. Bingkai utama lompat menghidupkan kedudukan menegak bola, menjadikannya melompat ke atas dan ke bawah. Kedua-dua animasi digunakan pada elemen bola, mempunyai tempoh 2 saat dan mempunyai kesan mudah masuk dan keluar.

KESIMPULAN

Mencipta animasi bola melekit ialah cara yang menyeronokkan dan mudah untuk meningkatkan daya tarikan visual tapak web anda. Dengan beberapa baris kod HTML dan CSS, kami boleh menambah kesan hebat ini pada tapak web kami.

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