[原创]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 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果.下面这些发出闪亮光泽的按钮,很漂亮吧?把鼠标悬停在按钮上,还有动感的光泽移动效果. 温馨提示:为保证最佳的效 ...
随机推荐
- Lite Your Android English
https://litesuits.com/ 一些话 简约的背后,往往是复杂 还原面向对象应有的体验,让应对繁多业务所增加的,并未增加. 展开设计理念 Lite每个项目仅几十KB,这相当于你项目中 ...
- 扩大ubuntu虚拟机硬盘空间
一.背景: 出于测试的需要,在ubuntu 14.04系统中通过virtualbox虚拟机安装了额ubuntu 14.04系统(guest os).安装过程采用ubuntu 14.04的默认分区方法. ...
- JavaSript模块规范 - AMD规范与CMD规范介绍
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...
- 理解SVG的viewport,viewBox,preserveAspectRatio
万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...
- Activity的生命周期
Activity的生命周期 以往我们实现页面间的跳转都是实例化Intent类的对象,但是页面在我们眼前的出现与消失没有我们所看到的那么简单,它有一个复杂的生命周期,一个页面的出现,被覆盖,再次出现,被 ...
- poj题目
poj2965 poj1753:标准的BFS+位运算优化 poj1328:线段覆盖变种,把圆对应到线段上,贪心求解 poj2109:高精度开根,二分+高精度,注意要判断答案的位数,如果按照题目给的范围 ...
- python实战（开发新浪微博应用）
#coding=utf-8 """ 本应用主要功能 1.用户选择喜欢的标签加关注 2.获取用户粉丝中自己还没有关注的,->加关注,提高粉丝稳定性 3.获取用户关注列 ...
- Django补遗（一）
链接MYSQL数据库 修改项目中的配置文件: DATABASES = { 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME' ...
- Oracle时间戳（毫秒）转为Date
1.SQL ) + TO_DATE('1970-01-01 08:00:00', 'YYYY-MM-DD HH:MI:SS'), 'YYYY-MM-DD HH:MI:SS') AS CDATE FRO ...
- Leetcode 75. Sort Colors
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...