Bagaimana untuk membuat imej slaid dan muncul dengan css-tutorial css-php.cn

Bagaimana untuk membuat imej slaid dan muncul dengan css

WBOY

Lepaskan： 2021-12-09 17:52:56

asal

6204 orang telah melayarinya

Kaedah: 1. Gunakan pernyataan "elemen gambar {animation: name time}" untuk mengikat animasi gelongsor pada elemen gambar 2. Gunakan "@keyframes name {0%{transform:translateX(-sliding jarak)} }" pernyataan menetapkan tindakan animasi gelongsor, cuma biarkan gambar perlahan-lahan meluncur masuk dan muncul.

Bagaimana untuk membuat imej slaid dan muncul dengan css

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

Cara membuat gambar slaid dan muncul dalam css

Dalam css, anda boleh menggunakan atribut animasi dan peraturan @keyframes untuk mencapai kesan gambar gelongsor Melalui peraturan @keyframes, animasi boleh dibuat.

Sintaks atribut animasi adalah seperti berikut:

animation: name duration timing-function delay iteration-count direction;

Salin selepas log masuk

Antaranya:

Bagaimana untuk membuat imej slaid dan muncul dengan css

Prinsip mencipta animasi adalah mengubah secara beransur-ansur satu set gaya CSS untuk set gaya 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 yang digunakan untuk menetapkan tindakan gelongsor imej. Sifat 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>
img{
animation:fadenum 5s;
}
@keyframes fadenum{
  0%{transform:translateX(-420px);}
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

Salin selepas log masuk

Hasil output:

(Belajar perkongsian video: css tutorial video )

Atas ialah kandungan terperinci Bagaimana untuk membuat imej slaid dan muncul dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!