Html+Css实现九大行星动画效果
前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了,
今年神舟十一号载人飞船顺利发射成功,中国航天技术越来越成熟,浩瀚的宇宙中有着无限的未知等着我们去探索,为表示对祖国航天事业的支持,用代码来表示是最合适的了,就用3D效果稍微修改修改画了一个九大行星星系图,当然因为冥王星被踢出了,大家不要纠结,上个效果图。
这里的椭圆轨道、动画旋转全部使用CSS3来实现,并合理计算好每个行星的公转和自转的时间,让行星旋转的更加逼真,所用到的CSS的属性不是很多,主要就是animation和transform,属性的使用我也不在这里过多介绍了,主要是给大家分享一下实现的这个效果。
考虑到CSS3的兼容性,用chrome和Firefox效果比较好,正所谓好马配好鞍,随着Html5和CSS3的不断流行,我们可以做出更加炫酷的页面。
提供一下源码 http://files.cnblogs.com/files/gangang/planet.rar
PS:在这里也感谢公司的视觉设计师提供的素材。
Html+Css实现九大行星动画效果的更多相关文章
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- bootstrap.css 进度条没有动画效果
操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
- CSS 实现的各种球体效果
CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...
- Jquery11 动画效果
学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行. ...
随机推荐
- 软件project(六)——需求分析
需求分析是软件开发期的第一个阶段,是关系到软件开发成败的关键步骤.需求分析的任务就是明白系统必须完毕那些工作,以下是对需求分析这一章做的简要总结. 导图: 解释说明: 我将 ...
- html5 文件系统File API
前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...
- Asp.Net Identity 深度解析 之 注册登录的扩展
关于权限每个系统都有自己的解决方案,今天我们来讨论一下微软的权限框架Asp.Net Identity ,介绍如下 http://www.asp.net/identity 这里不在赘余. 很多人认为 ...
- cocos2d-x的TestCpp分析
最近,我刚开始学coco2d-x 我会写我的学习经验来 首先TestCppproject有许多例子文件夹,而在这些文件夹以外的其他文件 .我首先研究这些文件: controller.h/cpp:管理方 ...
- Python 3语法小记(九) 异常 Exception
常见异常: Exception 所有异常的基类 AttributeError 特性应用或赋值失败时引发 IOError ...
- openGL的使用步骤
使用openGL步骤:1.创建GLSurfaceView对象2.创建GLSurfaceView.renderer实现类.3.设置activity的contentView,以及设置view的render ...
- springmvc3.1.1+hibernate4
上篇介绍了基本的配置,这篇着重介绍与hibernate4整合. 1.web.xml文件中加入spring-hibernate的配置.新的web.xml文件内容如下: <?xml version= ...
- IOS UI 第三篇:基本UI
工厂模式: .h文件: #import <Foundation/Foundation.h>typedef enum{ QFRed, QFYellow, QFBlu ...
- HttpClient 检索与获取过程数据
使用 HttpClient 检索与获取过程数据 对于System.Net.Http的学习(一)——System.Net.Http 简介 对于System.Net.Http的学习(二)——使用 Ht ...
- W3C的CORS Specification
W3C的CORS Specification 随着Web开放的程度越来越高,通过浏览器跨域获取资源的需求已经变得非常普遍.在我看来,如果Web API不能针对浏览器提供跨域资源共享的能力,它甚至就不应 ...