CSS3怎么實(shí)現(xiàn)流星雨效果

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

說(shuō)明：正文只講述單個(gè)流星雨的實(shí)現(xiàn)方式，多個(gè)的效果只需要對(duì)單個(gè)的動(dòng)畫(huà)起始點(diǎn)、寬度稍加修改即可，具體示例見(jiàn)文末 github 地址。

難度系數(shù)

☆☆☆☆☆

效果圖

思路

流星雨的實(shí)現(xiàn)分為三部分：

（1）用 border 屬性實(shí)現(xiàn)直角三角形。三角形的實(shí)現(xiàn)可以參考 CSS繪制三角形

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

（3）添加動(dòng)畫(huà)效果，讓直角三角形動(dòng)起來(lái)

HTML

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

解析：

• html 添加一個(gè)動(dòng)畫(huà)容器即可

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;
    }
}

解析：

• 直角三角形

• 直角三角形的實(shí)現(xiàn)，首先確定直角的方位，本例直角方位為左下角，因此設(shè)置左邊框和下邊框?yàn)橛蓄伾?，右邊框和上邊框?yàn)橥该魃?/p>

• 流星類似一條線的形狀，所以直角三角形高度很小，寬度很大。因此此處設(shè)置左右邊框?qū)挾戎岛艽螅舷逻吙驅(qū)挾戎岛苄?/p>

• 類似 span 這樣 display 默認(rèn)屬性值不為 block 的元素，需要設(shè)置 display 屬性為 block

• 圓形效果

• 通過(guò) border-radius 設(shè)置圓形 border 即可，border-radius 的值與直角三角形高度相同即可（注意高度值應(yīng)為 border-top-width 和 border-bottom-width 數(shù)值之和）

• 動(dòng)畫(huà)效果

• 通過(guò) margin-left 設(shè)置動(dòng)畫(huà)初始和結(jié)束位置

• 通過(guò)改變 border-*-width 的值達(dá)到流星長(zhǎng)度變化的效果

• 動(dòng)畫(huà)時(shí)長(zhǎng)決定流星通過(guò)界面的時(shí)間

• 動(dòng)畫(huà)次數(shù)設(shè)置為無(wú)限次

知識(shí)點(diǎn)

• CSS 實(shí)現(xiàn)三角形

• 圓角 border

• animation 添加動(dòng)畫(huà)效果

• @keyframes 自定義動(dòng)畫(huà)

Gitbub 源碼：

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

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