Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?
Bagaimana untuk mencipta animasi bola melekit menggunakan HTML dan CSS?
- PHPzke hadapan
- 2023-08-28 10:21:061064semak imbas
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>
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>
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!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menukar nilai Unicode kepada aksara dalam JavaScript?Artikel seterusnya：Bagaimana untuk menukar nilai Unicode kepada aksara dalam JavaScript?