[原创]CSS3打造动态3D气球

周末在江边晨跑的时候发现不少

当时心血来潮就想，应该能够在网页中实现一下

 

这几天得闲就作了一下，效果以下

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

demo下载在文章最后

预览

实现思路

css中实现不少效果均可以“取巧”实现，这里咱们也取巧一下，div设置三面的border-radius，而后旋转一下，这里就是平面的“气球”了

 

启用3d变换，接着复制重叠几个，分别设置rotateX,rotateY造成一个3d球体

 

接下来，使用SVG的 path 画一条曲线做为气球线

 

动画实现

静态的气球作好了，接下来要让气球"动起来"，我这里的思路是画上背景的蓝天白云，让云动起来

 

这里云就是三个圆叠到一块儿

 

好了，放一块儿

 

 

 

接着就设置动画啦~

首先设置云的，使用translate使云从上往下飘动，完了再从左往右飘动

这里建议动画时长久一点，让动画看起来稍微逼真一点点。。。。

 

接着设置气球的动画，这里要设置时长与云的同样，

而后配合云的动画，往上下和左右偏移

看起来有联动的感受

 

结语

好了，这就让气球动起来了。

 

不过总的看下来，动画效果仍是显得假。。。

也有些失真，或许动画时长设置更久一点会好些

你们也能够试一下，欢迎你们拍砖，喜欢能够点下【推荐】

 

DEMO下载点 这里