Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menetapkan lebar sempadan bawah boleh animasi menggunakan CSS?
Bagaimana untuk menetapkan lebar sempadan bawah boleh animasi menggunakan CSS?
- WBOYke hadapan
- 2023-09-24 13:53:171183semak imbas
Dalam CSS, kita boleh menggunakan sifat CSS "border-bottom" untuk menetapkan sempadan bawah elemen HTML. Kita boleh menghidupkan lebar sempadan bawah menggunakan sifat animasi.
Selain itu, kita perlu menentukan bingkai utama untuk menghidupkan sempadan bawah dengan menukar lebarnya.
tatabahasa
Pengguna boleh mengikut sintaks di bawah untuk menghidupkan lebar sempadan bawah.
selector {
animation: mymove 5s infinite;
}
@keyframes mymove {
50% {
border-bottom: 25px solid black;
}
}
Dalam sintaks di atas, kami mencipta kerangka utama "mymove" untuk menetapkan lebar sempadan bawah daripada 5 piksel kepada 25 piksel.
Contoh 1
Dalam contoh di bawah, kami telah mencipta elemen div yang mengandungi kelas "ujian". Selain itu, kami menggunakan beberapa CSS pada elemen div untuk menggayakannya. Kami menggunakan atribut "animasi" untuk menghidupkan elemen div berdasarkan kerangka utama "mymove" selama 5 saat dan masa tanpa had.
Dalam kerangka utama "mymove", kami menukar lebar sempadan bawah kepada 0%, 30%, 60%, 85% dan 100%. Dalam output, pengguna boleh memerhati animasi lebar sempadan bawah.
<html>
<head>
<style>
.test {
width: 500px;
height: 200px;
background-color: red;
border: 2px solid green;
border-bottom: 5px solid black;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% { border-bottom: 5px solid black; }
30% { border-bottom: 15px solid black; }
60% { border-bottom: 25px solid black; }
85% { border-bottom: 15px solid black; }
100% { border-bottom: 5px solid black; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border using CSS </h2>
<div class = "test"> </div>
</html>
Contoh 2
Dalam contoh di bawah, kami mencipta elemen c1a436a314ed609750bd7c7d319db4da Selepas itu, kami menggunakan sifat CSS untuk menggayakan elemen. Kami juga menggunakan sifat "animasi" untuk menganimasikan lebar sempadan bawah.
Dalam kerangka utama "Animasi Sempadan", kami menukar lebar sempadan dengan mengekalkan sifat sempadan yang lain sama.
<html>
<head>
<style>
.test {
width: fit-content;
border: 1px dotted blue;
border-bottom: 1px solid red;
animation: border-animation 1.5s infinite ease-in-out;
padding: 5px 10px;
color: green;
}
@keyframes border-animation {
0% { border-bottom: 1px solid red; }
30% { border-bottom: 3px solid red; }
50% { border-bottom: 5px solid red; }
70% { border-bottom: 3px solid red; }
100% { border-bottom: 1px solid red; }
}
</style>
</head>
<body>
<h2> Adding the <i> animation </i> to bottom border of checkbox using CSS</h2>
<h2 class = "test"> Welcome to the TutorialsPoint! </h2>
</html>
Pengguna belajar menganimasikan lebar bahagian bawah sempadan menggunakan CSS. Kita perlu menggunakan sifat CSS "animasi" dan mentakrifkan kerangka utama animasi. Dalam kerangka utama, kita boleh menukar lebar bahagian bawah sempadan menggunakan sifat CSS "sempadan bawah" atau "lebar-bawah-sempadan".
Atas ialah kandungan terperinci Bagaimana untuk menetapkan lebar sempadan bawah boleh animasi menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!