css3で簡単なロケットアニメーションを作成する（コード付き）-CSSチュートリアル-php.cn

css3で簡単なロケットアニメーションを作成する（コード付き）

青灯夜游

リリース： 2018-11-06 16:04:51

オリジナル

3856 人が閲覧しました

この記事の内容は、css3 を使用して簡単なロケットアニメーションを作成することです (コード付き)。必要な友人が参考になれば幸いです。

前回の記事【css3アニメーションのtransform属性とtransition属性の簡単な使い方】では、transform属性とtransition属性の簡単な使い方を紹介しました。以下では、transform アトリビュートとtransition アトリビュートを使用してさまざまな効果を組み合わせ、マウスのホバリングとロケット飛行の単純なアニメーション効果を実現する方法を紹介します。コードを見てみましょう!

html コード:

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

ログイン後にコピー

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

ログイン後にコピー

css3で簡単なロケットアニメーションを作成する（コード付き）

マウスオーバー効果を追加した後の CSS2 コード:

/* 悬停效果 */

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

ログイン後にコピー

css3で簡単なロケットアニメーションを作成する（コード付き）

マウスがホバーしているとき、変換は実装されていますが、効果は少し唐突なので、少しトランジション効果を追加する必要があります。

元の css1 コード、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;
}

ログイン後にコピー

css3で簡単なロケットアニメーションを作成する（コード付き）