CSS3如何實現流星雨效果？ （程式碼範例）

本篇文章給大家透過程式碼範例介紹一下使用CSS3如何實現流星雨效果。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【推薦教學：CSS影片教學】

說明：正文只講述單一流星雨的實現方式，多個的效果只需要對單一的動畫起始點、寬度稍加修改即可，具體範例請見文末 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如何實現流星雨效果？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！