一、引言

当流星划过静谧的太空，一个个美好的愿望流逝，我还没来得及许愿..别急，今天我就教大家如何用css画出一颗颗耀眼的流星，再让它们一个个的划过夜空，这次你一定来得及许愿。

二、思考过程

1、流星的头部

首先将页面的背景颜色设置为#121212，并将div设置成宽、高5px的圆点，这样我们就得到了一个流星的头部。

通过css的变形与阴影，让它看起来更美观，代码如下。

代码解析：

1）transform-origin:x y;

这个声明是负责变圆的，xy可以填px或em，x可以填写left、center、right，y可以填写top、middle、bottom。xy用来设置元素的运动的基点（参照点）

2）box-shadow

盒子阴影效果，里面的值分别为 向右偏移、向下偏移、内外阴影、颜色透明度

2、流星的尾巴

用伪类的方法，在流行空间后继续加上一些内容

代码如下：

代码解析：

运用边框颜色透明与transform:rotate(deg)进行配合，画出倾斜的流星尾巴。

倾斜在之前的效果中有提到，如果大家忘记了，那咱们温故而知新吧！

最后一行被注释掉的代码，是动画效果的声明噢！

3、加上动画效果

我们需要在star和star:after的选择器中加入动画声明。

代码如下：

这样我们的小流星就可以滑动了！

4、添加不同颜色的流星

为了更加漂亮，我们可以多添加几个这样的流星，并换上不同的颜色

将上期的月球与今天的流星相结合，那么一个太空中的流星雨就做好了！

三、下期预告

像素游戏风靡一时，现在也会有很多朋友在游戏中打造自己的世界。那么，下期我将带大家一起去一个像素风的火堆，让我们一起用css写出五彩斑斓的世界吧！