[原创]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 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...
随机推荐
- Lua的string和string库总结
Lua有7种数据类型,分别是nil.boolean.number.string.table.function.userdata.这里我总结一下Lua的string类型和string库,复习一下,以便加 ...
- [LeetCode] Add Binary 二进制数相加
Given two binary strings, return their sum (also a binary string). For example,a = "11"b = ...
- [LeetCode] Remove Element 移除元素
Given an array and a value, remove all instances of that value in place and return the new length. T ...
- echart折线图小知识
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...
- Java的基本数据类型与转换
1.1 Java为什么需要保留基本数据类型 http://www.importnew.com/11915.html 基本数据类型对大多数业务相关或网络应用程序没有太大的用处,这些应用一般是采用客户端/ ...
- 用libcurl 登录网站
libcurl 可以发送和接收HTTP消息,因此可以发送用户名.密码和验证码来登录网站,网上有不少这方面的内容,但不甚完整,我摸索了两天,将其中要点记录下来. 基本步骤 正常访问登录页面,访问时,设置 ...
- C#-WebForm-纯HTML提交方式
此方法常用于 纯.html页面向数据库添加数据 在.aspx网页中可以通过传值的方式提交信息,如何在.html网页中提交数据? 提交数据需要在同一个 form 中,用到两个属性:action.meth ...
- vue-router
官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) ...
- Oracle存储过程由例子到理论
1.基础环境 oracle HR环境添加新表 CREATE TABLE "HR"."cus_test" ( "id" BYTE) NOT N ...
- 使用XHR2或Jsonp实现跨域以及实现原理
我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据 只是浏览器的同源策略 禁止了获取 在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...