Rumah > Artikel > hujung hadapan web > Bagaimana untuk mencapai kesan putaran menggerakkan tetikus ke atas dalam css

Bagaimana untuk mencapai kesan putaran menggerakkan tetikus ke atas dalam css

青灯夜游asal: 2022-01-20 15:53:355559semak imbas

Kaedah: 1. Gunakan "@keyframes animation name {100% {transform:rotate(angle)}" untuk mencipta animasi putaran 2. Gunakan "element:hover{animation: animation name time linear infinite}; " untuk menetapkan animasi Pencetus apabila tetikus bergerak ke atas elemen.

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

Css untuk mencapai kesan putaran apabila tetikus bergerak ke atas

Kesan putaran boleh dibuat menggunakan animasi atribut dan peraturan "@keyframes" Pelaksanaan animasi.
Apabila tetikus dialihkan ke atas elemen, pemilih :hover diperlukan untuk mencetuskan animasi putaran. (:pemilih hover digunakan untuk memilih elemen yang penunjuk tetikus terapung dan menetapkan gaya.)

Kod pelaksanaan:

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin: 50px auto;
			}

			div:hover {
				animation: mymove 1s linear infinite;
			}

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

			}

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

			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

Bagaimana untuk mencapai kesan putaran menggerakkan tetikus ke atas dalam css

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan putaran menggerakkan tetikus ke atas dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 css css3 指针选择器 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：Bagaimana untuk melaksanakan animasi zum masuk imej dengan cssArtikel seterusnya：Bagaimana untuk melaksanakan animasi zum masuk imej dengan css

Artikel berkaitan

Lihat lagi