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!