Créer une animation de fusée simple avec CSS3 (avec code)

Le contenu de cet article est d'utiliser CSS3 pour créer une animation de fusée simple (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans l'article précédent [Utilisation simple de l'attribut de transformation et de l'attribut de transition dans l'animation CSS3], l'utilisation simple de l'attribut de transformation et de l'attribut de transition a été introduite. Ci-dessous, nous expliquons comment utiliser l'attribut de transformation et l'attribut de transition pour combiner différents effets afin d'obtenir un effet d'animation simple de survol de la souris et de vol de fusée. Jetons un coup d'œil au code !

code html :

<div id="outerspace">
	<div class="rocket">
		<div>
			<!-- rocket -->
		</div>
				火箭
	</div>
</div>

code css 1 :

/* 初始状态 */

#outerspace {
	width: 800px;
	height: 500px;
	margin: 100px auto;
	position: relative;
	height: 400px;
	background: #0c0440 url(img/outerspace.jpg);
	color: #fff;
}

div.rocket {
	position: absolute;
	bottom: 10px;
	left: 20px;
	
}

div.rocket div {
	width: 92px;
	height: 215px;
	background: url(img/rocket.gif) no-repeat;
	
}

code css2 après ajout de l'effet de survol de la souris :

/* 悬停效果 */

#outerspace:hover div.rocket {
	-webkit-transform: translate(540px, -200px);
	-moz-transform: translate(540px, -200px);
	-o-transform: translate(540px, -200px);
	-ms-transform: translate(540px, -200px);
	transform: translate(540px, -200px);
}

#outerspace:hover div.rocket div {
	-webkit-transform: rotate(70deg);
	-moz-transform: rotate(70deg);
	-o-transform: rotate(70deg);
	-ms-transform: rotate(70deg);
	transform: rotate(70deg);
}

Lorsque la souris survole, bien que la transformation soit mise en œuvre, l'effet est un peu brusque et il faut ajouter un petit effet de transition.

Ajouter une transition vers le code css1 d'origine, le code css3 :

div.rocket {
	position: absolute;
	bottom: 10px;
	left: 20px;
	-webkit-transition: 3s ease-in;
	-moz-transition: 3s ease-in;
	-o-transition: 3s ease-in;
	transition: 3s ease-in;
}

div.rocket div {
	width: 92px;
	height: 215px;
	background: url(img/rocket.gif) no-repeat;
	-webkit-transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out;
	-o-transition: 2s ease-in-out;
	transition: 2s ease-in-out;
}

Vous avez terminé !

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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!