[原创]CSS3打造动态3D气球
周末在江边晨跑的时候发现很多
当时心血来潮就想，应该可以在网页中实现一下
这几天得闲就做了一下，效果如下
(尽量在最新版本的chrome或者firefox中查看)
demo下载在文章最后
预览
-->
实现思路
css中实现很多效果都可以“取巧”实现，这里我们也取巧一下，div设置三面的border-radius，然后旋转一下，这里就是平面的“气球”了
启用3d变换，接着复制重叠几个，分别设置rotateX,rotateY形成一个3d球体
接下来，使用SVG的 path 画一条曲线作为气球线
动画实现
静态的气球做好了，接下来要让气球"动起来"，我这里的思路是画上背景的蓝天白云，让云动起来
这里云就是三个圆叠到一起
好了，放一起
接着就设置动画啦~
首先设置云的，使用translate使云从上往下飘动，完了再从左往右飘动
这里建议动画时长久一点，让动画看起来稍微逼真一点点。。。。
接着设置气球的动画，这里要设置时长与云的一样，
然后配合云的动画，往上下和左右偏移
看起来有联动的感觉
结语
好了，这就让气球动起来了。
不过总的看下来，动画效果还是显得假。。。
也有些失真，或许动画时长设置更久一点会好些
大家也可以试一下，欢迎大家拍砖，喜欢可以点下【推荐】
DEMO下载点 这里
[原创]CSS3打造动态3D气球的更多相关文章
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- css3实践—创建3D立方体
css3实践-创建3D立方体 要想实现3D的效果,其实非常简单,只需指定一个元素为容器并设置transform-style:preserve-3d,那么它的后代元素便会有3D效果.不过有很多需要注意的 ...
- jquery+css3打造一款ajax分页插件
原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...
- html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画 很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览 源码下载 实现的代码. h ...
- 纯css3实现的3D按钮
前面已经为大家介绍了好多纯css3实现的按钮.今天要再给大家带来一款纯css3实现的3D按钮.在实例中给出了五种颜色的3D按钮.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- 【原创】打造基于Dapper的数据访问层
[原创]打造基于Dapper的数据访问层 前言 闲来无事,花几天功夫将之前项目里用到的一个数据访问层整理了出来.实现单个实体的增删改查,可执行存储过程,可输出返回参数,查询结果集可根据实际情况返回 ...
- 纯CSS3实现动态火车行驶特效
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 CSS3 打造一组质感细腻丝滑的按钮
CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...
随机推荐
- bootstrap自学总结不间断更新
2.栅格系统 container-fluid 自适应宽度100% container 固定宽度(适应响应式) 屏幕宽度=x x>=1200 1170 992< ...
- 让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
- CentOS系统yum源使用报错：Error: Cannot retrieve repository metadata (repomd.xml) for repository: rpmforge.
服务器上的yum突然不好使用,使用yum的时候报错如下:[root@bastion-IDC src]# yum list......Could not retrieve mirrorlist http ...
- [LeetCode] Find All Anagrams in a String 找出字符串中所有的变位词
Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...
- [LeetCode] Intersection of Two Linked Lists 求两个链表的交点
Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
- 测试docker不同主机间容器互相访问
测试服务器(centos6.5):192.168.16.70 网卡:eth0192.168.16.74 网卡:eth0第一步,分别在2台机器执行: yum install docker service ...
- JavaScript中实现extend()方法
var male = { sex: "male" }; var xiaoming = { name: "xiaoming", school: "xin ...
- 关于EventSource的精华
他是keep-alive的连接,服务端持续向这个请求的Reponse发送数据,以"data: "+您的消息+"\n\n"的格式发送,浏览器端会收到您发送的消息. ...
- 用上了ReSharper
用上了ReSharper,发现很爽1.使用var2.去掉无用的using3.将foreach改为linq let4.字符串为cost5.作用域与变量名适配6.文件夹与namespace不匹配7.去掉为 ...
- 5806 NanoApe Loves Sequence Ⅱ（尺取法）
传送门 NanoApe Loves Sequence Ⅱ Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/131072 K ...