Maison > Article > interface Web > Comment obtenir l'effet de rotation en déplaçant la souris vers le haut en CSS

Comment obtenir l'effet de rotation en déplaçant la souris vers le haut en CSS

青灯夜游original: 2022-01-20 15:53:355560parcourir

Méthode : 1. Utilisez "@keyframes animation name {100% {transform:rotate(angle)}" pour créer une animation de rotation ; 2. Utilisez "element:hover{animation: animation name time Linear infinite}" pour la définir. lors du déplacement de la souris, déclenchez l'animation lorsque l'élément.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Css pour obtenir l'effet de rotation lorsque la souris bouge vers le haut

L'effet de rotation peut être obtenu en utilisant l'attribut d'animation et les règles "@keyframes" pour créer des animations.
Lorsque la souris est déplacée sur un élément, le sélecteur :hover est nécessaire pour déclencher l'animation de rotation. (Le sélecteur :hover est utilisé pour sélectionner l'élément sur lequel le pointeur de la souris flotte et définir le style.)

Code d'implémentation :

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

Comment obtenir leffet de rotation en déplaçant la souris vers le haut en CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 指针选择器 transform animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter une animation de zoom avant sur une image avec CSSArticle suivant：Comment implémenter une animation de zoom avant sur une image avec CSS

Articles Liés

Voir plus