Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3
Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3
- 青灯夜游asal
- 2022-03-18 16:19:474543semak imbas
Kaedah pelaksanaan: Gunakan peraturan "@keyframes animation name {}" dan pernyataan "opacity: transparency;" untuk mencipta animasi gambar yang hilang 2. Gunakan "elemen gambar {opacity: 0; animation: animation nama masa 1; }" pernyataan boleh digunakan untuk menggunakan animasi gambar yang hilang pada elemen gambar.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dalam CSS, anda boleh menggunakan atribut animasi, peraturan "@keyframes" dan atribut kelegapan untuk mencapai kesan animasi yang hilang.
@keyframes ialah peraturan CSS3 yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.
Gunakan @keyframes untuk mentakrifkan tindakan animasi kemudian, menggunakan sifat animasi CSS yang berbeza, anda boleh mengawal banyak aspek animasi yang berbeza, termasuk bilangan lelaran animasi, sama ada untuk berselang-seli antara nilai permulaan dan akhir; , dan sama ada animasi perlu dijalankan atau dijeda. Animasi juga boleh melambatkan masa mulanya.
Atribut kelegapan mengawal ketelusan elemen.
Kod pelaksanaan:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
img {
opacity: 0;
animation: mymove 3s 1;
/* Safari and Chrome */
-webkit-animation: mymove 3s 1;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3" >
</body>
</html>
(Belajar perkongsian video: tutorial video css, depan web -akhir )
Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!