CSS digunakan untuk mencipta animasi sempadan yang cantik dan menarik, yang menambah pergerakan dan minat pada halaman web Untuk mencipta animasi sempadan, kita perlu menentukan sempadan untuk elemen yang ingin kita animasikan, kemudian kita akan gunakan peralihan CSS dan animasi untuk menambah pergerakan pada sempadan
Animasi sempadan boleh digunakan untuk membuat kesan tuding pada butang, pautan dan elemen interaktif yang lain. Animasi ini juga boleh digunakan untuk membuat animasi pemuatan yang menunjukkan kemajuan semasa halaman atau elemen sedang dimuatkan -butang tindakan untuk menjadikannya lebih ketara.
kami akan mencipta kesan tuding yang menghidupkan sempadan unsur apabila pengguna menuding di atasnya.
Buat dokumen HTML dan takrifkan tajuk sebagai "Hover Effect Border Animation".
Tambahkan animasi berdenyut pada sempadan dengan tempoh yang tidak terhingga dan pemasaan mudah masuk. Pudarkan sempadan daripada merah kepada hijau kepada biru apabila tetikus berada di atas kotak dan lumpuhkan animasi berdenyut
Tentukan animasi berdenyut dengan bingkai utama yang menukar warna jidar daripada merah kepada hijau kepada biru. Tambahkan elemen div dengan kelas kotak pada badan dokumen HTML
Simpan dan lihat fail HTML dalam pelayar web untuk melihat animasi sempadan kesan hover.
<!DOCTYPE html>
<html>
<head>
<title>Hover Effect Border Animation</title>
<style>
/* Set up the body with flexbox to center the box */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #48b6ff;
min-height: 100vh;
}
/* Style the box with a transparent border */
.box {
display: inline-block;
padding: 10px;
font-size: 18px;
color: #333;
border: 2px solid transparent;
transition: border 0.5s ease;
/* Add the pulsing animation to the border */
animation: border-pulse 2s ease-in-out infinite;
}
/* When the box is hovered, change the border to a gradient and disable the pulsing animation */
.box:hover {
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
animation: none;
}
/* Define the pulsing animation */
@keyframes border-pulse {
0% {
border-color: #f00;
}
50% {
border-color: #0f0;
}
100% {
border-color: #00f;
}
}
</style>
</head>
<body>
<!-- Add the box element to the HTML -->
<div class="box">
Hover over me
</div>
</body>
</html>
Di sini, kami akan mencipta animasi pemuatan dengan menganimasikan sempadan ikon pemuatan.
Isytiharkan jenis dokumen sebagai HTML menggunakan
Mulakan dokumen HTML dengan membuka teg .
Tambahkan teg
Di dalam teg
, tambahkan teg