[原创]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 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...
随机推荐
- jquery.mobiscroll仿Iphone ActionSheet省市区联动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="u ...
- BZOJ 4008 【HNOI2015】 亚瑟王
题目链接:亚瑟王 这道题好神啊TAT--果然我的dp还是太弱了-- 一开始想了半天的直接dp求期望,结果最后WA的不知所云-- 最后去翻了题解,然后发现先算概率,再求期望--新姿势\(get\). 我 ...
- Codevs堆练习
Codevs堆练习 黄金:2830.2879.2995.3110 钻石:1052.1063.1245.1246.2057.2573.3377 大师:1021.1765.2069.2913.3032
- 《Redis入门指南（第二版）》读书思考总结之Redis五大数据类型
热身:系统级命令 1. 获得符合规则的键名列表 KEYS pattern 模式匹配 产品的缓存:product+"."+....; => keys product* 订单的 ...
- 关于label的点击事件(原创)
通常做网页时不会用radio和checkbox的原有样式,通常会进行样式美化,手机端我用的jqurey weui框架,他的原理是这样的: <label class="check_lab ...
- Unity Animator动画状态机 深入理解（二）IK控制
IK还是一个很神奇和实用的东西啊,起码可以用代码来控制人物骨骼位置还是很爽的.因为不是动画师~ 这篇可能跟Animator没啥关系了哈,都是代码层的. 看了一官方的案例,老的,有些问题,自己修改了一下 ...
- linux安装maven
一.下载maven 最新地址在:http://maven.apache.org/download.cgi 我下载的是:apache-maven-3.3.9-bin.tar.gz,是已经编译好的包 解压 ...
- php 远程图片本地化
/** * 把新浪的远程图片下载到自己服务器上 * * @access public * @param goods_desc $goods_desc 要处理的内容 * @return mix 如果成功 ...
- chose.jquery 联动
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- oracle中临时表是用来做什么的
oracle中临时表是用来做什么的 某些情况下, 需要 多个非常大的表关联的情况下, 但是需要检索的, 是少量的数据的时候.可以先把 大表的数据, 检索出那一小部分, 然后插入到 临时表中, 最后再关 ...