CSS流星的繪制需要使用CSS的偽元素和動(dòng)畫屬性。首先，我們需要?jiǎng)?chuàng)建一個(gè)DIV元素，并且給它設(shè)置寬度和高度。

.meteor {
width: 10px;
height: 30px;
}

然后，我們需要使用偽元素添加流星的小尾巴和頭部。我們使用偽元素的“before”和“after”屬性來添加流星的尾巴和頭部。

.meteor:before {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 0; 
height: 0; 
border-top: 6px solid transparent;
border-right: 10px solid #fff;
border-bottom: 6px solid transparent;
}
.meteor:after {
content: "";
position: absolute;
top: -12px;
right: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fff;
}

接下來，我們可以使用CSS動(dòng)畫屬性讓流星沿著指定的軌跡飛行。我們可以使用“@keyframes”屬性來定義動(dòng)畫的關(guān)鍵幀，以及“animation”屬性來綁定動(dòng)畫。

@keyframes animate-meteor {
0% { left: -50px; top: -100px; }
100% { left: 100%; top: 100%; }
}
.meteor {
position: absolute;
top: -100px;
left: -50px;
animation: animate-meteor 3s linear infinite;
}

最后，我們就成功地創(chuàng)建了一個(gè)CSS流星！