css3制作一个简单的火箭动画（附代码）

互联网 18-11-6

本篇文章给大家带来的内容是使用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; 	 }

/* 悬停效果 */  #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; }