用css3实现一个会飞的小火箭案例

1、css3中我们常用到的一个属性是transform，也就是我们常常所用的缩放，平移，旋转等2D动画，接下来就用这几个变换个给大家做一个小案例，效果图如下：

2、html代码：

3、css代码：

4、注意点：

4.1

  transform: translate(1400px, -700px)  rotate(45deg) scale(0.2);

这一行的代码的书写顺序是有要求的，必须是先translate，然后再能旋转，不能颠倒，因为实现的效果是会受先后顺序所影响的

4.2

这个太阳的生成是采用径向渐变，渐变我们分两种：线性渐变和径向渐变，径向渐变的原理如下：

径向渐变： 半径 at 圆心点，color1, color2, color3, 圆形之外的区域用最后一个颜色填充

  background: radial-gradient(150px at top right, red, orange, skyblue);

在这里顺便给大家拓展一下线性渐变：

 background: linear-gradient(to bottom, red, yellow); 

线性渐变的方向是固定的，需要指定渐变的方向to bottom，然后指定颜色，用逗号隔开，一般都是用来设置一些浅色的背景，让背景稍微呈现出一种立体的感觉。

总结：其实就是运用了css3中的几种变换属性，以及背景渐变的属性，代码很简单，但对于巩固这几个属性的理解还是比较好玩的~