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

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

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

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

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

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

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

border 是個(gè)非常神奇、非常強(qiáng)大的屬性，通過設(shè)置四個(gè)方向的 border 可以實(shí)現(xià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é)

通過上面三個(gè)案例，我們可以總結(jié)出 border 屬性繪制簡單圖形的規(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ì)被腰斬)

?? 繪制鳥兒

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

右翼由兩部分，分別是直角梯形和直角三角形。通過 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?拉長?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ù)值逆時(shí)針旋轉(zhuǎn)*/
transform:?rotateX(-20deg);
復(fù)制代碼

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

?? 實(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)是移動(dò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)動(dòng)起來

風(fēng)動(dòng)起來的效果實(shí)現(xià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)起來了，現(xiàn)在看起來效果就很賞心悅目了，就差飛翔的鳥兒了。

?? 飛翔吧小鳥

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

初始化3D

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

兩翼動(dòng)畫

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

/*?兩翼翅膀的時(shí)針相反，因此動(dòng)畫是反的?*/
@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)畫后，還有至關(guān)重要的一步，要設(shè)置 transform-origin ，以右翼為例子，翅膀應(yīng)該沿紅框標(biāo)識(shí)線旋轉(zhuǎn)

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

整體動(dòng)畫

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

?? 源碼倉庫

傳送門: flybird^[2]

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