Bagaimana untuk mencapai kesan kecerunan ketinggian dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mencapai kesan kecerunan ketinggian dalam css3

WBOY

Lepaskan： 2022-04-28 17:54:51

asal

3173 orang telah melayarinya

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.

Bagaimana untuk mencapai kesan kecerunan ketinggian dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk mencapai kesan kecerunan ketinggian dalam css3

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;

Salin selepas log masuk

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>

Salin selepas log masuk

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!