Rumah > Artikel > hujung hadapan web > Bagaimana untuk menukar lebar secara beransur-ansur dengan melayang di atas elemen split dalam CSS?
Bagaimana untuk menukar lebar secara beransur-ansur dengan melayang di atas elemen split dalam CSS?
- WBOYke hadapan
- 2023-08-23 23:57:021328semak imbas
Pada bila-bila masa kita ingin menukar gaya elemen secara beransur-ansur, beralih dari satu gaya ke gaya lain, sama ada melalui interaksi pengguna atau masa yang dihabiskan di tapak. Anda boleh menggunakan animasi untuk menukar banyak gaya dalam sebarang tempoh masa. Mari lihat sifat animasi yang anda perlukan.
Keyframes− Ini digunakan untuk menentukan animasi sesuatu elemen. Ia mengandungi perubahan yang akan berlaku pada gaya elemen. Elemen itu kemudiannya bergerak daripada gaya yang terdapat pada permulaan kepada gaya terakhir yang disebut.
Animation-name − Ini digunakan untuk merujuk animasi supaya anda tidak perlu menentukan peraturan setiap kali anda menambah animasi.
Tempoh Animasi − Ini menentukan tempoh animasi yang digunakan pada elemen. Nilai awalnya ialah 0ms dan boleh diteruskan tanpa had.
Animasi-iteration-count − Ini menentukan berapa kali animasi akan berulang.
Animasi Kelewatan − Jika anda perlu menangguhkan animasi untuk beberapa lama, anda boleh menggunakan sifat ini.
Arah Animasi − Ini menentukan sama ada animasi perlu ke hadapan, ke belakang atau silih berganti antara dua arah.
Fungsi Masa Animasi − Gunakan sifat ini apabila anda mahu animasi mempunyai selang masa yang berbeza pada permulaan, tengah dan akhir.
Kita juga boleh menggunakan sifat singkatan "animasi", yang terdiri daripada semua sifat ini. Ia berfungsi pada semua elemen tetapi tidak boleh diwarisi. Adalah penting untuk ambil perhatian bahawa apabila menggunakan notasi singkatan, susunan nilai adalah penting kerana setiap nilai ditafsirkan secara berbeza bergantung pada susunannya.
Contoh
Contoh penggunaan animasi dalam CSS ditunjukkan di bawah.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations in CSS</title>
<style>
@keyframes example {
from {
background-color: maroon;
}
to {
background-color: plum;
}
}
div {
width: 500px;
height: 500px;
margin: 12.25%;
background-color: maroon;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Sekarang kita tahu apa itu animasi dalam CSS, kita akan membincangkan cara menganimasikan elemen div untuk menukar lebarnya secara beransur-ansur.
Sifat peralihan
Kami akan menggunakan atribut peralihan untuk menyelesaikan masalah ini. Atribut ini digunakan untuk menambah kesan peralihan kepada elemen. Ia adalah harta trengkas yang tersedia dalam CSS.
Ia mentakrifkan peralihan yang berlaku apabila animasi berlaku dan elemen berubah dari satu keadaan ke keadaan yang lain. Ia terpakai kepada semua unsur dan tidak boleh diwarisi.
Sifat berikut membentuk sifat peralihan yang disingkatkan.
Transition-delay − Sifat ini menentukan berapa lama penyemak imbas perlu menunggu sebelum menggunakan sifat peralihan. Nilai awalnya ialah 0, nilai positif akan membuatnya menunggu lebih lama, dan nilai negatif akan membuat peralihan lebih cepat.
Tempoh Peralihan - Ini menetapkan tempoh masa yang kesan peralihan kelihatan, selepas itu animasi tamat. Nilai lalai sifat ini ialah 0, jadi animasi tidak kelihatan secara lalai.
Transition-property − Ia menetapkan elemen yang kesan peralihan akan digunakan. Ia boleh mempunyai dua nilai yang mungkin, tiada dan semua. Secara lalai, nilai ditetapkan kepada semua, jadi semua elemen mempunyai kesan peralihan yang digunakan, tetapi tiada satu pun bermakna tiada unsur yang mempunyai kesan peralihan itu.
Fungsi pemasaan-peralihan − Harta ini digunakan untuk mengawal kelajuan peralihan pada permulaan, tengah dan akhir animasi. Nilai awal ditetapkan untuk memudahkan, tetapi CSS mempunyai banyak fungsi masa yang telah ditetapkan.
Kami boleh menetapkan sifat peralihan pada keadaan tuding dan animasi akan dicetuskan pada tuding atau menggunakan kelas pseudo aktiviti. Kami juga boleh menggunakan JS untuk memperuntukkan kelas secara dinamik dan menggunakannya untuk mencetuskan peralihan.
Contoh
Satu contoh mudah menggunakan atribut peralihan dalam CSS ditunjukkan di bawah.
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
</style>
</head>
<body>
<a>This text will have its font modified on hover</a>
</body>
</html>
Apabila melaksanakan program di atas, sekeping teks akan dipaparkan dan jika anda mengarahkan tetikus anda ke atasnya, anda boleh melihat kesan peralihan teks.
Gunakan peralihan sebagai penyelesaian
Kita kini akan melihat contoh menggunakan peralihan untuk menyelesaikan masalah yang dihadapi.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: royalblue;
}
div {
width: 150px;
height: 200px;
background: linear-gradient(
0deg,
rgb(111, 190, 87) 20%,
rgb(119, 218, 119) 50%,
rgb(93, 81, 76) 98%
);
transition: width 2s;
}
.textCenter {
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<h1>Example of using transition property to increase width gradually on hover.</h1>
<div class="textCenter">Please hover over here</div>
</body>
</html>
Keluaran program di atas ialah kotak div yang lebarnya beransur-ansur berubah daripada 150px kepada 500px dalam masa 2 saat.
Kesimpulan
Ringkasnya, menggunakan pemilih hover CSS untuk menukar lebar elemen partition secara beransur-ansur ialah cara yang cekap untuk menambah kesan animasi halus tanpa memerlukan kod tambahan. Ini amat berguna apabila mencipta elemen interaktif dalam halaman web, seperti butang dan menu. Dengan hanya beberapa baris kod, anda boleh mencipta kesan dinamik untuk menyerlahkan halaman anda.
Atas ialah kandungan terperinci Bagaimana untuk menukar lebar secara beransur-ansur dengan melayang di atas elemen split dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!