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

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

?? 前言

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

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

我是一只小小小小鳥(niǎo)，想要飛呀飛卻飛也飛不高，我尋尋覓覓尋尋覓覓一個(gè)，溫暖的懷抱~~~ ????????

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

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

• border 繪制簡(jiǎn)單幾何圖形
• transform 與 animation 知識(shí)
• 收獲一只可愛(ài)的飛鳥(niǎo)

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

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

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

1. 設(shè)置 `div` 的 `width` 與 `height` 為 `0`，設(shè)置四個(gè)方向的 `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ǎn)單圖形總結(jié)

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

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

?? 繪制鳥(niǎo)兒

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

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

頭部是個(gè)三角形，直接看代碼

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

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

右翼由兩部分，分別是直角梯形和直角三角形。通過(guò) border 部分示例 3 可知，如果不設(shè)置 border-top ，border-left/right 的設(shè)置效果也會(huì)被腰斬，形成一個(gè)直角邊，咱們就利用這個(gè)特性，就可以完成直角三角形和直角梯形的設(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 拉長(zhǎng) left 形成梯形效果 */
height: 30px;
border-left: 30px solid #8567f0;
border-bottom: 10px solid transparent;
復(fù)制代碼

?? 鳥(niǎo)兒組裝

1. 鳥(niǎo)兒組裝

通過(guò) position: relative 和 position: absolute 將圖形組裝起來(lái)，組裝后的小鳥(niǎo)如下圖

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

2. 讓鳥(niǎo)兒更立體

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

例如頭部:

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

經(jīng)過(guò) rotate 變換后的小鳥(niǎo)，是不是就生動(dòng)多了。

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

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

.wind {
    position: absolute;
    width: 4px;
    height: 200px;
    /* 風(fēng)是移動(dòng)的，通過(guò) overflow 可以限制風(fēng)的長(zhǎ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)動(dòng)起來(lái)

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

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

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

?? 飛翔吧小鳥(niǎo)

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

初始化3D

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

兩翼動(dòng)畫(huà)

讓鳥(niǎo)兒飛起來(lái)最重要的就是兩翼動(dòng)起來(lái)，分別設(shè)置兩個(gè)動(dòng)畫(huà) wingRight 和 windLeft

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

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

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

整體動(dòng)畫(huà)

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

?? 源碼倉(cāng)庫(kù)

傳送門: flybird^[2]

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