純HTML+CSS寫出一顆會飄動的樹，有沒有驚豔到你呢？

本文轉載於:猿2048網站純HTML+CSS寫出一顆會飄動的樹，有沒有驚豔到你呢？

前言

使用HTML+CSS能寫出什麼驚人的效果呢？

針對這個問題，我總會看到相似的回答，好比沒有JS，前端永遠都是靜態的；HTML5要搭配JS，要否則一文不值。

JS當然強大，但CSS也並不是一文不值，這裏我就要爲CSS3鳴不平了，說出上面那些回答的人可能真的不瞭解CSS的強大之處。

今天這篇文章咱們就一塊兒來看看使用純HTML+CSS如何寫出一棵會飄動的樹吧，看看你有沒有被驚豔到。

文章末尾附有Github源碼地址。

CSS

會飄動的樹-原型

首先咱們來看看這棵樹的原型圖吧。

原型圖

而後咱們再去一步步分析下這個圖是如何實現的吧。

原理分析

整棵樹的HTML部分實際是由一系列的DIV構成，每一個父DIV內部包含兩個子DIV，表明左右分叉的樹枝，而後一層層往下，造成相似二叉樹的結構。

經過CSS的scale屬性，給每一個子DIV元素縮小寬高比例，實際看起來就是樹枝越往外層越細的效果。

最後給左右兩側的樹枝不一樣的動畫效果，就能夠看出整棵樹在跳動的效果了。

圖形拆分

將整個圖形進行拆分，一整顆大樹其實是由不少的樹枝組成，咱們先來看看單根樹枝是如何實現的。

拆分後的圖形效果是這樣的。

拆分後

只要咱們將這一根樹枝的實現原理弄懂了，就能夠很容易的知道整棵樹是如何實現的了。

HTML代碼

HTML部分的代碼實際都是由一系列的DIV構成。

每一層DIV下面有兩個子DIV，這裏由於只展現了一根樹枝，因此看到的父DIV只有一個子DIV。

HTML代碼

CSS代碼

CSS部分的代碼是整棵樹實現的核心。

• 最外層樹根DIV基本屬性

最外層DIV也是樹根，它的基本屬性很重要。包含寬度和高度，定位信息，設置動畫。

基本CSS屬性

咱們定義的樹根DIV實際上是水平狀態的，因此須要再額外加上一個動畫讓樹根DIV旋轉成垂直狀態。

樹根DIV

• 左右樹枝DIV

每一個div下面的第一個子div，表示的是樹枝的右側分支，經過上面基本CSS屬性已經設置了一個rot動畫。

第二個子div，表示的是樹枝的左側分支，須要設置另一個動畫rot-inv。

左側分支

• 樹根動畫rot-root

樹根動畫主要是設置旋轉角度，將水平的div，旋轉爲垂直方向的div，增長了正負5度的誤差，就會有樹根左右搖動的效果。

樹根動畫

• 左側樹枝動畫

左側樹枝的動畫效果包括逆時針旋轉必定的角度，同時會經過scale屬性縮小寬高，表現出樹枝愈來愈細的效果。

左側樹枝動畫

• 右側樹枝動畫

右側樹枝動畫效果包括順時針旋轉必定的角度，同時經過scale屬性縮小寬高，表現出樹枝愈來愈細的效果。

右側樹枝動畫

這個項目到這裏就算是作完了，想要完整代碼本身學習練手的小夥伴進個人羣自助領取，已經上傳到學習羣裏了：640633433，歡迎初學和進階中的小夥伴。

至此，全部部分的代碼就講解完畢了。若是運行完成後，就能夠獲得文章一開始‘搖動的樹’的效果了。