css3製作一個簡單的火箭動畫（附程式碼）

這篇文章帶給大家的內容是使用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;
	
}

#在新增滑鼠懸停效果後，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);
}

當滑鼠懸停時，雖然實現了變換，但效果有點突兀，需要添加一點過渡效果。

在原來的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製作一個簡單的火箭動畫（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！