Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk mencapai kesan kecerunan ketinggian dalam css3
Kaedah pelaksanaan: 1. Gunakan pernyataan "elemen {animation: name time}" untuk mengikat animasi pada elemen dan tetapkan masa yang diperlukan untuk animasi 2. Gunakan "@keyframes name {100%{height : penyataan "Nilai ketinggian;}}" kecerunan, tetapkan tindakan animasi perubahan ketinggian untuk mencapai kesan kecerunan.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Boleh dicapai menggunakan kesan animasi.
atribut animasi boleh menetapkan kesan animasi elemen:
nama-animasi menentukan nama bingkai utama yang perlu diikat kepada pemilih. .
tempoh animasi menentukan masa yang diperlukan untuk menyelesaikan animasi, dalam saat atau milisaat.
fungsi pemasaan-animasi menentukan lengkung kelajuan animasi.
tunda-animasi menentukan kelewatan sebelum animasi bermula.
kiraan lelaran-animasi menyatakan bilangan kali animasi harus dimainkan.
arah animasi menentukan sama ada animasi perlu dimainkan secara terbalik mengikut giliran.
Sintaksnya ialah:
animation: name duration timing-function delay iteration-count direction;
Kecerunan ketinggian boleh menggunakan atribut transformasi
Atribut transformasi menggunakan transformasi 2D atau 3D pada elemen . Sifat ini membolehkan kita memutar, menskala, mengalih atau mencondongkan elemen.
Contoh adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
background-color:pink;
animation:fadenum 5s;
}
@keyframes fadenum{
100%{height:300px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
(Belajar perkongsian video: css tutorial video )
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan kecerunan ketinggian dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!