前面講過css3可以替代很多js實(shí)現(xiàn)的效果，其實(shí)很多時(shí)候純css3甚至可以替代圖片，直接用css3就可以畫出一些簡單的圖片。雖然css3畫出來的圖片效果可能不如直接用圖片的好，實(shí)現(xiàn)起來也比較復(fù)雜，最麻煩的是兼容性問題，不如圖片來得直接實(shí)用。但是換一種思路去思考問題的解決辦法往往能激發(fā)我們的靈感，也有助于我們學(xué)習(xí)css3。

下面給出的demo里會有用圖片和純css3實(shí)現(xiàn)的風(fēng)車效果的對比。

先看看靜態(tài)的效果圖：

下面簡單介紹一下我是如何用純css3實(shí)現(xiàn)一個(gè)風(fēng)車的動(dòng)畫效果的，

1.畫出風(fēng)車的柱子

我們可以看到風(fēng)車的柱子是一個(gè)等邊的梯形，通過width,height屬性配合border我們可以實(shí)現(xiàn)很多幾何圖形，如三角形，梯形等等，大家可以參照下面梯形的實(shí)現(xiàn)方法自己試試其他圖形的實(shí)現(xiàn)。

發(fā)表評論 共有條評論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表