cari

Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menulis kesan pergerakan naik dan turun css

Bagaimana untuk menulis kesan pergerakan naik dan turun css

WBOY
WBOYasal
2021-12-07 17:17:244022semak imbas

Dalam css, peraturan bingkai utama, animasi dan atribut transformasi boleh digunakan untuk mencapai kesan gerakan atas dan bawah Kaedah penulisan ialah "elemen {animation: name time}@keyframes name {50%{transform: translateY (. jarak pergerakan)}}".

Bagaimana untuk menulis kesan pergerakan naik dan turun css

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

Cara menulis pergerakan atas dan bawah elemen css

Dalam css, anda boleh menggunakan atribut animasi dan peraturan @keyframes untuk mencapai kesan animasi elemen pudar , melalui peraturan @keyframes, anda boleh mencipta animasi.

Animasi dicipta dengan menukar secara beransur-ansur satu set gaya CSS kepada yang lain. Anda boleh menukar set gaya CSS ini beberapa kali semasa animasi.

Nyatakan masa apabila perubahan berlaku sebagai peratusan, atau melalui kata kunci "dari" dan "kepada", yang bersamaan dengan 0% dan 100%. 0% ialah masa mula animasi, 100% ialah masa tamat animasi. Untuk sokongan penyemak imbas terbaik, anda harus sentiasa menentukan pemilih 0% dan 100%.

Terdapat juga atribut transformasi untuk menetapkan gerakan naik dan turun.

Contoh adalah seperti berikut: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
img{
animation:fadenum 5s ;
}
@keyframes fadenum{
   50%{transform:translateY(80px);}
}
</style>
</head>
<body>
<img  src="1118.02.png" alt="Bagaimana untuk menulis kesan pergerakan naik dan turun css" >
</body>
</html>

Hasil keluaran:

Bagaimana untuk menulis kesan pergerakan naik dan turun css

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk menulis kesan pergerakan naik dan turun css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk mengalih keluar gaya condong dari em tag dalam cssArtikel seterusnya：Bagaimana untuk mengalih keluar gaya condong dari em tag dalam css

Artikel berkaitan

Lihat lagi