[原创]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 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...
随机推荐
- [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)
Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义: 文本:由0个或 ...
- [bzoj2588][count on a tree] (主席树+lca)
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...
- C语言学习 第九次作业总结
本次作业练习的内容是二维数组.下面我先简单的说下二维数组的基本知识点: 二维数组其实这个中文概念颇有误导--会让人感觉这是一个两个维度的概念.所以很多的国外的C语言书籍上会称这种数组为多下标数组:即首 ...
- 详解C#中的反射
反射(Reflection) 2008年01月02日 星期三 11:21 两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B ...
- html&css复习题(参考答案)
1. 常用的块属性标签及特征有哪些? 常用块标签:Div h1~ h6 ol ul li dl td dd table tr th td p br form 块标签特征:独占一行,换行显 ...
- 关于mirai病毒的一些研究
首页好像只能显示随笔,之前发在文章里面的,见文章http://www.cnblogs.com/mrchang/articles/6210681.html
- 【URAL 1519】Formula 1
http://acm.timus.ru/problem.aspx?space=1&num=1519 调了好久啊.参考(抄)的iwtwiioi的题解. 如果想要题解,题解在<基于连通性状态 ...
- weui 图片弹框
添加图片与弹出效果对比: HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- C#重写一个控件Label
1. 首先你把一个label控件拖到窗体上.2. 创建一个准备继承的类,比如叫LabelEx,派生于Label类 public class LabelEx : Label { //鼠标左键双击消息 p ...
- noip2012 开车旅行
此题100分的解法就是先预处理出每个点的下一个点之后倍增就好了.其实并没有太大难度. pbihao用双向链表写过了此题.在本地上我treap狂操他,but在rqnoj上,我依靠反复提交才A掉此题(最后 ...