Bagaimana untuk melaksanakan animasi putaran dalam css3-tutorial css-php.cn

Bagaimana untuk melaksanakan animasi putaran dalam css3

青灯夜游

Lepaskan： 2021-12-16 15:13:29

asal

7848 orang telah melayarinya

Kaedah pelaksanaan: 1. Gunakan pernyataan "@keyframes animation name {50% {transform: rotate(rotation angle);}" untuk mencipta animasi putaran; 2. Gunakan "elemen {animation: animation name time infinite;} ” pernyataan menggunakan animasi putaran pada elemen yang ditentukan.

Bagaimana untuk melaksanakan animasi putaran dalam css3

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

css3 melaksanakan animasi putaran

1 Jika anda ingin menggunakan css3 untuk melaksanakan animasi, anda perlu menggunakan animasi atribut dan "@keyframes" "peraturan.

@keyframes ialah peraturan CSS3 yang boleh digunakan untuk mentakrifkan gelagat tempoh animasi CSS dan mencipta animasi mudah.
Animasi adalah serupa dengan peralihan kerana ia merupakan perwakilan menukar sifat CSS dari semasa ke semasa. Perbezaan utama ialah peralihan dicetuskan secara tersirat apabila nilai sifat berubah (contohnya, apabila nilai sifat berubah pada tuding), tetapi animasi dilakukan secara eksplisit apabila sifat animasi digunakan. Oleh itu, animasi perlu menunjukkan nilai eksplisit untuk sifat animasi. Nilai ini ditakrifkan oleh bingkai utama animasi yang dinyatakan dalam peraturan @keyframes. Oleh itu, peraturan @keyframes terdiri daripada satu set peraturan gaya CSS terkapsul yang menerangkan cara nilai harta berubah dari semasa ke semasa.
Kemudian, menggunakan sifat animasi CSS yang berbeza, anda boleh mengawal pelbagai aspek animasi yang berbeza, termasuk bilangan lelaran animasi, sama ada untuk bergantian antara nilai mula dan tamat, dan animasi Sama ada ia harus berjalan atau berhenti seketika. Animasi juga boleh melambatkan masa mulanya.
Sintaks:

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

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

Salin selepas log masuk

2. Gunakan transform: rotate(旋转角度) dalam peraturan "@keyframes" untuk mengawal tindakan putaran .

Kod pelaksanaan:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: pink;
				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>
		<div></div>
	</body>
</html>

Salin selepas log masuk

Bagaimana untuk melaksanakan animasi putaran dalam css3

(Belajar perkongsian video: tutorial video css)

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