前言 使用HTML+CSS能寫出什麼驚人的效果呢？ 針對這個問題，我總會看到類似的回答，比如沒有JS，前端永遠都是靜態的；HTML5要搭配JS，要不然一文不值。 JS固然強大，但CSS也並非一文不值，這裡我就要為CSS3鳴不平了，說出上面那些回答的人可能真的不瞭解CSS的強大之處。 今天這篇文章我們 ...
前言
使用HTML+CSS能寫出什麼驚人的效果呢？
針對這個問題，我總會看到類似的回答，比如沒有JS，前端永遠都是靜態的；HTML5要搭配JS，要不然一文不值。
JS固然強大，但CSS也並非一文不值，這裡我就要為CSS3鳴不平了，說出上面那些回答的人可能真的不瞭解CSS的強大之處。
今天這篇文章我們就一起來看看使用純HTML+CSS如何寫出一棵會飄動的樹吧，看看你有沒有被驚艷到。
文章末尾附有Github源碼地址。
CSS
會飄動的樹-原型
首先我們來看看這棵樹的原型圖吧。
原型圖
然後我們再去一步步分析下這個圖是如何實現的吧。
原理分析
整棵樹的HTML部分實際是由一系列的DIV構成，每個父DIV內部包含兩個子DIV，代表左右分叉的樹枝，然後一層層往下，形成類似二叉樹的結構。
通過CSS的scale屬性，給每個子DIV元素縮小寬高比例，實際看起來就是樹枝越往外層越細的效果。
最後給左右兩側的樹枝不同的動畫效果，就可以看出整棵樹在跳動的效果了。
圖形拆分
將整個圖形進行拆分，一整顆大樹實際上是由很多的樹枝組成，我們先來看看單根樹枝是如何實現的。
拆分後的圖形效果是這樣的。
拆分後
只要我們將這一根樹枝的實現原理弄懂了，就可以很容易的知道整棵樹是如何實現的了。
HTML部分的代碼實際都是由一系列的DIV構成。
每一層DIV下麵有兩個子DIV，這裡因為只展示了一根樹枝，所以看到的父DIV只有一個子DIV。
CSS代碼
CSS部分的代碼是整棵樹實現的核心。
-
最外層樹根DIV基本屬性
最外層DIV也是樹根，它的基本屬性很重要。包含寬度和高度，定位信息，設置動畫。
基本CSS屬性
我們定義的樹根DIV其實是水平狀態的，所以需要再額外加上一個動畫讓樹根DIV旋轉成垂直狀態。
樹根DIV
-
左右樹枝DIV
每個div下麵的第一個子div，表示的是樹枝的右側分支，通過上面基本CSS屬性已經設置了一個rot動畫。
第二個子div，表示的是樹枝的左側分支，需要設置另外一個動畫rot-inv。
左側分支
-
樹根動畫rot-root
樹根動畫主要是設置旋轉角度，將水平的div，旋轉為垂直方向的div，增加了正負5度的偏差，就會有樹根左右搖動的效果。
樹根動畫
-
左側樹枝動畫
左側樹枝的動畫效果包括逆時針旋轉一定的角度，同時會通過scale屬性縮小寬高，表現出樹枝越來越細的效果。
左側樹枝動畫
-
右側樹枝動畫
右側樹枝動畫效果包括順時針旋轉一定的角度，同時通過scale屬性縮小寬高，表現出樹枝越來越細的效果。
右側樹枝動畫
這個項目到這裡就算是做完了，想要完整代碼自己學習練手的小伙伴進我的群自助領取，已經上傳到學習群里了：640633433，歡迎初學和進階中的小伙伴。
至此，所有部分的代碼就講解完畢了。如果運行完成後，就可以得到文章一開始‘搖動的樹’的效果了。
