看到很多人說沒有js，永遠都只是靜態的，我想那是你真的對CSS3的強大之處還不瞭解吧。
下面我們來看看那些使用純的CSS3+HTML實現的驚人效果吧。
這個效果中使用的是一系列的div，每個div內部包含兩個子div，表示樹的分支，一層層往下，每層都比上一層分支更細。
CSS程式碼
在css程式碼中透過@keyframes定義動畫，動畫中透過scale屬性值來縮小每個div，所以可以讓每個樹枝都比莖要小。
同時透過rotate屬性去控制div旋轉一定的角度，依次模仿樹枝的飄動。
當然所有的程式碼不可能只有這麼多，這裡只截取了部分重點程式碼。
很多前端coder在開發的時候如果遇到loading效果，第一反應肯定是使用gif圖吧。
這個用CSS3完全可以實現。
上圖中的loading效果都是透過CSS3實現的，完全不借助於js。
不要以為飛機只能透過圖片形式的呈現在我們眼前，透過CSS完全可以自己畫一個飛機出來。
我們來看看整個的HTML部分的程式碼。
透過每個class的名字我們就能區分出div對應的飛機的部分，像引擎，機翼等等。
這裡我們透過機翼部分的CSS程式碼來看。
設定了一系列CSS3的屬性。
這些效果說不上特別驚豔，但是也絕不能說CSS一無是處，CSS正在變得越來越強大，那些看似複雜的效果，也慢慢的可以被CSS實現。
看到很多人說沒有js，永遠都只是靜態的，我想那是你真的對CSS3的強大之處還不瞭解吧。
下面我們來看看那些使用純的CSS3+HTML實現的驚人效果吧。
隨風飄蕩的樹HTML程式碼這個效果中使用的是一系列的div，每個div內部包含兩個子div，表示樹的分支，一層層往下，每層都比上一層分支更細。
CSS程式碼
在css程式碼中透過@keyframes定義動畫，動畫中透過scale屬性值來縮小每個div，所以可以讓每個樹枝都比莖要小。
同時透過rotate屬性去控制div旋轉一定的角度，依次模仿樹枝的飄動。
當然所有的程式碼不可能只有這麼多，這裡只截取了部分重點程式碼。
loading效果很多前端coder在開發的時候如果遇到loading效果，第一反應肯定是使用gif圖吧。
這個用CSS3完全可以實現。
上圖中的loading效果都是透過CSS3實現的，完全不借助於js。
飛機不要以為飛機只能透過圖片形式的呈現在我們眼前，透過CSS完全可以自己畫一個飛機出來。
HTML程式碼我們來看看整個的HTML部分的程式碼。
透過每個class的名字我們就能區分出div對應的飛機的部分，像引擎，機翼等等。
CSS程式碼
這裡我們透過機翼部分的CSS程式碼來看。
設定了一系列CSS3的屬性。
總結這些效果說不上特別驚豔，但是也絕不能說CSS一無是處，CSS正在變得越來越強大，那些看似複雜的效果，也慢慢的可以被CSS實現。