最近看了一場用CSS3實現的流星雨動畫，效果真是驚艷~

CSS3可以實現很多驚艷的效果，如漸變、陰影、3D效果等，而在動畫方面，也許你還沒有發現，實際上CSS3的動畫效果也是非常豐富的。

下面就是一段實現流星雨效果的CSS3代碼：

@keyframes shooting {
from {
transform: translate3d(0, -100%, 0) rotateZ(-45deg) scaleY(2);
transform-origin: center bottom;
}
to {
transform: translate3d(100%, 100%, 0) rotateZ(225deg) scaleY(0.2);
transform-origin: center bottom;
}
}
.meteor {
position: absolute;
top: -10px;
left: -10px;
width: 10px;
height: 2px;
background: white;
box-shadow: 0px 0px 4px 2px white;
animation: shooting 3s linear infinite;
}
.meteor:nth-child(1) { animation-delay: 0s; }
.meteor:nth-child(2) { animation-delay: 0.2s; }
.meteor:nth-child(3) { animation-delay: 0.4s; }

這段代碼使用了CSS3中的@keyframes關鍵字，用來定義一個動畫，名字叫做"shooting"，這個動畫包含了兩個狀態，一個是從上往下斜著飛行的流星，一個是消失在下方。

接著，定義了一個.meteor的class，用來定義流星的樣式，包括尺寸、顏色、陰影、位置等。

最后，使用animation屬性來應用動畫，其中3s表示這個動畫的時間長度，linear表示動畫時間分配均勻，infinite表示動畫將一直播放下去。

通過這段CSS3代碼，我們就可以實現一個非?？犰诺牧餍怯晷Ч?。