Erstellen Sie eine einfache Raketenanimation mit CSS3 (mit Code)

Der Inhalt dieses Artikels besteht darin, eine einfache Raketenanimation (mit Code) zu erstellen. Ich hoffe, dass er für Sie hilfreich ist.

Im vorherigen Artikel [Einfache Verwendung von Transformationsattributen und Übergangsattributen in CSS3-Animationen] wurde die einfache Verwendung von Transformationsattributen und Übergangsattributen vorgestellt. Im Folgenden stellen wir vor, wie Sie mithilfe der Transformationsattribute und Übergangsattribute verschiedene Effekte kombinieren und so einen einfachen Animationseffekt aus Mausschweben und Raketenfliegen erzielen. Werfen wir einen Blick auf den Code!

HTML-Code:

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

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

Nach dem Hinzufügen des Mouseover-Effekts CSS2-Code:

/* 悬停效果 */

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

Wenn die Maus schwebt, ist die Transformation zwar implementiert, der Effekt ist jedoch etwas abrupt und es muss ein kleiner Übergangseffekt hinzugefügt werden.

Übergang zum ursprünglichen CSS1-Code, CSS3-Code hinzufügen:

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

Fertig!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine einfache Raketenanimation mit CSS3 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!