纯CSS小火箭图标动画

一款纯CSS的小火箭图标动画，表现小火箭垂直上升的飞行效果，除了向下运动的白云之外，还有平滑变化的图标背景色。

分类：css3 > transform 难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需远程调用font-awesome图标字体库，并引入页面的CSS样式文件，代码如下：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，一个div容器里放入图标i标签和其余的云朵span标签，代码如下：

<div class="scene">
	<i class="fa fa-rocket" aria-hidden="true"></i>
	<span class="cloud cloud1"><i class="fa fa-cloud" aria-hidden="true"></i></span>
	<span class="cloud cloud2"><i class="fa fa-cloud" aria-hidden="true"></i></span>
	<span class="cloud cloud3"><i class="fa fa-cloud" aria-hidden="true"></i></span>
</div>