本文通過 css 的簡單應用實現了流星雨的效果。正文只講述單個流星雨的實現方式，多個的效果只需要對單個的動畫起始點、寬度稍加修改即可，具體示例見文末 github 位址。
難度係數
效果圖
思路
流星雨的實現分為三部分：
（1）用 border 屬性實現直角三角形。三角形的實現可以參考 css繪製三角形
（2）給直角三角形新增圓形效果，弱化直角形狀的稜角
（3）新增動畫效果，讓直角三角形動起來
html
css
.shooting-star
.animation
@keyframes fly
to }
圓形效果
動畫效果
知識點
gitbub 原始碼
流星雨 行者常至 雙子座流星雨
by 傳媒的朋友 李家成 by 傳媒的朋友 餘果林 by 林澤輝 by 張露文 看見的和看不見的 都在等待著人們的探索 五個嫦娥上去了 更有千萬個嫦娥即將遠行 等不到雙子座流星雨灑滿天際 沒有雙子座 沒有流星雨 但今晚有彩色的星星 在絕美的雙子座流星雨下 許個願吧 願今年能不留遺憾 願明年平平安安 ...
流星雨效果頁面
注 字母下落是動態的 如下 charset utf 8 流星雨title name keywords name description content 描述資訊 body style head width 400 height 400 style background 000000 id canva...
（期望概率）流星雨
時間限制 c c 1秒，其他語言2秒 空間限制 c c 131072k，其他語言262144k 64bit io format lld 現在一共有n天，第i天如果有流星雨的話，會有wiwi顆流星雨。第i天有流星雨的概率是pipi。如果第一天有流星雨了，那麼第二天有流星雨的可能性是p2 pp2 p，否...