Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3

青灯夜游

Lepaskan： 2022-03-18 16:19:47

asal

4540 orang telah melayarinya

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.

Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3

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>

Salin selepas log masuk

Bagaimana untuk mencapai kesan animasi imej yang hilang dalam css3

(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!