CSS3怎么實現流星雨效果

小編給大家分享一下CSS3怎么實現流星雨效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

說明：正文只講述單個流星雨的實現方式，多個的效果只需要對單個的動畫起始點、寬度稍加修改即可，具體示例見文末 github 地址。

難度系數

☆☆☆☆☆

效果圖

思路

流星雨的實現分為三部分：

（1）用 border 屬性實現直角三角形。三角形的實現可以參考 CSS繪制三角形

（2）給直角三角形添加圓形效果，弱化直角形狀的棱角

（3）添加動畫效果，讓直角三角形動起來

HTML

<span class="shooting-star animation"></span>

解析：

• html 添加一個動畫容器即可

CSS

.shooting-star {
    margin: 30px;
    display: block;
    width: 0;
    border-radius: 2px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 230px;
    border-left-style: solid;
    border-left-color: white;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.animation {
    animation: fly 3s infinite;
}
@keyframes fly {
    from {
        margin-left: 900px;
        border-left-width: 130px;
        border-right-width: 130px;
    }
    to {
        margin-left: -900px;
        border-left-width: 360px;
        border-right-width: 360px;
    }
}

解析：

• 直角三角形

• 直角三角形的實現，首先確定直角的方位，本例直角方位為左下角，因此設置左邊框和下邊框為有顏色的，右邊框和上邊框為透明色

• 流星類似一條線的形狀，所以直角三角形高度很小，寬度很大。因此此處設置左右邊框寬度值很大，上下邊框寬度值很小

• 類似 span 這樣 display 默認屬性值不為 block 的元素，需要設置 display 屬性為 block

• 圓形效果

• 通過 border-radius 設置圓形 border 即可，border-radius 的值與直角三角形高度相同即可（注意高度值應為 border-top-width 和 border-bottom-width 數值之和）

• 動畫效果

• 通過 margin-left 設置動畫初始和結束位置

• 通過改變 border-*-width 的值達到流星長度變化的效果

• 動畫時長決定流星通過界面的時間

• 動畫次數設置為無限次

知識點

• CSS 實現三角形

• 圓角 border

• animation 添加動畫效果

• @keyframes 自定義動畫

Gitbub 源碼：

https://github.com/nanzhangren/CSS_skills/blob/master/shooting_star/shooting_star.html

以上是“CSS3怎么實現流星雨效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！