Rumah > Artikel > hujung hadapan web > Bagaimana untuk memutar imej dalam css3

Bagaimana untuk memutar imej dalam css3

青灯夜游asal: 2022-08-31 18:35:343463semak imbas

Dalam CSS3, anda boleh menggunakan atribut animasi dan peraturan "@keyframes" untuk menambah animasi putaran pada imej untuk memutar imej. Langkah pelaksanaan: 1. Gunakan pernyataan "@keyframes animation name {50% {transform: rotate(rotation angle);}" untuk mencipta animasi putaran; 2. Gunakan pernyataan "picture element {animation: animation name time infinite;} " untuk menghidupkan putaran Hanya gunakannya pada elemen gambar yang ditentukan.

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

Dalam css3, anda boleh menggunakan atribut animasi dan peraturan "@keyframes" untuk menambah animasi putaran pada imej untuk membuat imej berputar

@keyframes Ia adalah peraturan CSS3 yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.
Sifat animasi digunakan untuk menggunakan animasi pada elemen tertentu menggunakan sifat animasi CSS yang berbeza, anda boleh mengawal banyak aspek animasi yang berbeza, termasuk bilangan lelaran animasi, sama ada sedang bermula Ganti antara dan nilai tamat, dan sama ada animasi harus dijalankan atau dijeda. Animasi juga boleh melambatkan masa mulanya.

Sintaks:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;
    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Untuk menentukan animasi putaran, anda perlu menggunakan atribut transform use: rotate dalam "@keyframes" sudut peraturan) untuk mengawal putaran.

Kod pelaksanaan:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img {
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}
			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="Bagaimana untuk memutar imej dalam css3" >
	</body>
</html>

Bagaimana untuk memutar imej dalam css3

Penerangan: atribut animasi

值	说明
animation	一个简写属性。
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。

( Mempelajari perkongsian video: Bermula dengan bahagian hadapan web)

Atas ialah kandungan terperinci Bagaimana untuk memutar imej dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 count function 选择器 transform animation

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：Apakah maksud penting dalam css?Artikel seterusnya：Apakah maksud penting dalam css?

Artikel berkaitan

Lihat lagi