[原創]CSS3打造動態3D氣球

週末在江邊晨跑的時候發現不少

當時心血來潮就想，應該能夠在網頁中實現一下

 

這幾天得閒就作了一下，效果以下

(儘可能在最新版本的chrome或者firefox中查看)

demo下載在文章最後

預覽

實現思路

css中實現不少效果均可以「取巧」實現，這裏咱們也取巧一下，div設置三面的border-radius，而後旋轉一下，這裏就是平面的「氣球」了

 

啓用3d變換，接着複製重疊幾個，分別設置rotateX,rotateY造成一個3d球體

 

接下來，使用SVG的 path 畫一條曲線做爲氣球線

 

動畫實現

靜態的氣球作好了，接下來要讓氣球"動起來"，我這裏的思路是畫上背景的藍天白雲，讓雲動起來

 

這裏雲就是三個圓疊到一塊兒

 

好了，放一塊兒

 

 

 

接着就設置動畫啦~

首先設置雲的，使用translate使雲從上往下飄動，完了再從左往右飄動

這裏建議動畫時長久一點，讓動畫看起來稍微逼真一點點。。。。

 

接着設置氣球的動畫，這裏要設置時長與雲的同樣，

而後配合雲的動畫，往上下和左右偏移

看起來有聯動的感受

 

結語

好了，這就讓氣球動起來了。

 

不過總的看下來，動畫效果仍是顯得假。。。

也有些失真，或許動畫時長設置更久一點會好些

你們也能夠試一下，歡迎你們拍磚，喜歡能夠點下【推薦】

 

DEMO下載點 這裏