點(diǎn)擊上方 前端瓶子君，關(guān)注公眾號

回復(fù)算法，加入前端編程面試算法每日一題群

?? 前言

前幾天在逛社區(qū)時，偶然發(fā)現(xiàn)一個非常賞心悅目得 小鳥飛翔效果，并且是純 css 實(shí)現(xiàn)的。

這不由讓我大感驚奇， css 的世界可謂是淵博如海，讓人又愛又恨。

我是一只小小小小鳥，想要飛呀飛卻飛也飛不高，我尋尋覓覓尋尋覓覓一個，溫暖的懷抱~~~ ????????

?? 進(jìn)入正題，接下來咱們就來一起實(shí)現(xiàn)自由的小鳥??吧。

學(xué)習(xí)本文，你可以學(xué)習(xí)到以下知識??:

• border 繪制簡單幾何圖形
• transform 與 animation 知識
• 收獲一只可愛的飛鳥

?? border 屬性學(xué)習(xí)

border 是個非常神奇、非常強(qiáng)大的屬性，通過設(shè)置四個方向的 border 可以實(shí)現(xiàn)很多簡單的幾何圖形。

下面用幾個例子帶大家學(xué)習(xí) border 的渲染機(jī)制:

1. 設(shè)置 `div` 的 `width` 與 `height` 為 `0`，設(shè)置四個方向的 `border` 顏色不同。
   

border-left: 30px solid red;
border-right: 30px solid blue;
border-top: 30px solid green;
border-bottom: 30px solid pink;
復(fù)制代碼

2. 分別設(shè)置 height: 20px;width: 0 width: 20px;height:0 和 width: 20px;height:20px

上圖按照步驟 2 的順序設(shè)置

3. 不設(shè)置 border-top

左側(cè)圖為設(shè)置 height: 20px 不設(shè)置 border-top；右側(cè)圖為設(shè)置 width: 20px 不設(shè)置 border-top

?? border繪制簡單圖形總結(jié)

通過上面三個案例，我們可以總結(jié)出 border 屬性繪制簡單圖形的規(guī)律:

1. border 共分四個方向，每個方向繪制其中一塊，如果寬高都為 0 ，每個方向繪制成三角形；否則繪制成梯形。
2. border 的寬度為繪制梯形的高
3. height 影響 border-left 和 border-right ，width 影響 border-top 和 border-bottom (例如示例 2 設(shè)置)
4. 當(dāng)一個方向未繪制時， border 會只繪制對立方向部分，并且只會繪制一般(例如示例 3 設(shè)置，會被腰斬)

?? 繪制鳥兒

由上面圖可以看到小鳥共有四個部位: 頭部、主體、兩翼、尾巴，都由簡單的幾何圖形構(gòu)成。所以都可以通過 border 實(shí)現(xiàn)，下面來實(shí)現(xiàn)以下頭部和兩翼部分。

????? 頭部實(shí)現(xiàn)

頭部是個三角形，直接看代碼

/* 設(shè)置 bottom 顯示， left/right 為透明 */
border-right: 15px solid transparent;
border-bottom: 30px solid #6b83fa;
border-left: 15px solid transparent;
復(fù)制代碼

?? 實(shí)現(xiàn)右翼

右翼由兩部分，分別是直角梯形和直角三角形。通過 border 部分示例 3 可知，如果不設(shè)置 border-top ，border-left/right 的設(shè)置效果也會被腰斬，形成一個直角邊，咱們就利用這個特性，就可以完成直角三角形和直角梯形的設(shè)置。

1. 直角三角形實(shí)現(xiàn)
   

/* 設(shè)置 border-left， borde-bottom 為透明 */
border-left: 30px solid #c0a9e0;
border-bottom: 30px solid transparent;
復(fù)制代碼

2. 直角梯形實(shí)現(xiàn)
   

/* 設(shè)置 height 拉長 left 形成梯形效果 */
height: 30px;
border-left: 30px solid #8567f0;
border-bottom: 10px solid transparent;
復(fù)制代碼

?? 鳥兒組裝

1. 鳥兒組裝

通過 position: relative 和 position: absolute 將圖形組裝起來，組裝后的小鳥如下圖

因?yàn)橹皇峭ㄟ^定位組裝小鳥，小鳥的所有部位處于同一平面，看起來十分生硬。

2. 讓鳥兒更立體

通過 transform: rotate 和 transform-origin 屬性將小鳥的頭部，尾部，兩翼旋轉(zhuǎn)一下，形成立體感

例如頭部:

/* 設(shè)置 transform 的基點(diǎn) */
transform-origin: 50% 100%;
/* 沿 x 軸偏移，負(fù)值逆時針旋轉(zhuǎn)*/
transform: rotateX(-20deg);
復(fù)制代碼

經(jīng)過 rotate 變換后的小鳥，是不是就生動多了。

?? 實(shí)現(xiàn)風(fēng)

風(fēng)的實(shí)現(xiàn)并不難，是通過 div 標(biāo)簽與 :before 配合實(shí)現(xiàn)。

.wind {
    position: absolute;
    width: 4px;
    height: 200px;
    /* 風(fēng)是移動的，通過 overflow 可以限制風(fēng)的長度 */
    overflow: hidden;
}
.wind:before {
    before {
    content: "";
    position: absolute;
    width: 4px;
    height: 300px;
    background: rgba(100, 200, 207, 0.3);
    transform: translateY(-300px);
    -webkit-animation: wind 2331ms 1268ms linear infinite; 
    animation: wind 2331ms 1268ms linear infinite;
}
復(fù)制代碼

就可以實(shí)現(xiàn) wind ，之后依次按照上述實(shí)現(xiàn) 10 組 wind ，實(shí)現(xiàn)后的效果如下:

10 組 wind 重疊在一起了，使用 transform: translate3d 依次設(shè)置 wind 位置，不斷調(diào)整，最終實(shí)現(xiàn)效果如下:

?? 讓風(fēng)動起來

風(fēng)動起來的效果實(shí)現(xiàn)原理非常簡單：.wind 設(shè)置 height: 200px ，超出 200px 會隱藏， :before 偽類中可以使用 animation 屬性，移動 wind 的 translateY

@-webkit-keyframes wind {
    0% {
        transform: translateY(-300px);
    }
    100% {
        transform: translateY(200px);
    }
}
.wind:before {
    transform: translateY(-300px);
    /* 設(shè)置每個風(fēng)的延遲時間和持續(xù)時間都不相同 */
    animation: wind 2249ms 3544ms linear infinite;
}
復(fù)制代碼

風(fēng)就動起來了，現(xiàn)在看起來效果就很賞心悅目了，就差飛翔的鳥兒了。

?? 飛翔吧小鳥

再讓鳥兒飛起來之前，我們首先來設(shè)置一些基本屬性

初始化3D

1. 設(shè)置 transform-style: preserve-3d 開啟 3D 渲染
2. 設(shè)置 perspective: 設(shè)置視距，讓飛翔的鳥兒看起來更符合人類視覺效果
3. 設(shè)置 drop-shadow: 真實(shí)世界的飛鳥怎么能沒有影子那。

兩翼動畫

讓鳥兒飛起來最重要的就是兩翼動起來，分別設(shè)置兩個動畫 wingRight 和 windLeft

/* 兩翼翅膀的時針相反，因此動畫是反的 */
@keyframes wingRight {
    0% {
        transform: rotateY(40deg);
    }
    100% {
        transform: rotateY(-40deg);
    }
}
@-webkit-keyframes wingLeft {
    0% {
        transform: rotateY(-40deg);
    }
    100% {
        transform: rotateY(40deg);
    }
}
復(fù)制代碼

設(shè)置完動畫后，還有至關(guān)重要的一步，要設(shè)置 transform-origin ，以右翼為例子，翅膀應(yīng)該沿紅框標(biāo)識線旋轉(zhuǎn)

transform-origin 默認(rèn)值為 50% 50% 0，很明顯是無法滿足旋轉(zhuǎn)要求的，根據(jù)瀏覽器坐標(biāo)系的知識，因此設(shè)置右翼 transform-origin 為 0 0 ，同理設(shè)置左翼為 100% 0

整體動畫

光在一個平面中飛翔不免有幾分無聊和乏味，作為天空中的精靈，鳥兒應(yīng)該自由的飛翔。給鳥兒添加繞 z 軸 360° 旋轉(zhuǎn)的動畫。

?? 源碼倉庫

傳送門: flybird^[2]

如果感覺有幫助的話，別忘了給小包點(diǎn)個 ? 。