Créer une animation de fusée simple avec CSS3 (avec code)-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2018-11-06 16:04:51

original

3858 Les gens l'ont consulté

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>

Copier après la connexion

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;
	
}

Copier après la connexion

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

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);
}

Copier après la connexion

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

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;
}

Copier après la connexion

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