前段时间项目中需要开发一个3D效果的环形菜单类似行星旋转,折腾了好久弄出了个样子,但是最后客户改版了不需要了,好不容易弄出来的吊炸天的效果不能这么浪费了,

  今年神舟十一号载人飞船顺利发射成功,中国航天技术越来越成熟,浩瀚的宇宙中有着无限的未知等着我们去探索,为表示对祖国航天事业的支持,用代码来表示是最合适的了,就用3D效果稍微修改修改画了一个九大行星星系图,当然因为冥王星被踢出了,大家不要纠结,上个效果图。

  这里的椭圆轨道、动画旋转全部使用CSS3来实现,并合理计算好每个行星的公转和自转的时间,让行星旋转的更加逼真,所用到的CSS的属性不是很多,主要就是animation和transform,属性的使用我也不在这里过多介绍了,主要是给大家分享一下实现的这个效果。

  考虑到CSS3的兼容性,用chrome和Firefox效果比较好,正所谓好马配好鞍,随着Html5和CSS3的不断流行,我们可以做出更加炫酷的页面。

  提供一下源码 http://files.cnblogs.com/files/gangang/planet.rar

  PS:在这里也感谢公司的视觉设计师提供的素材。

Html+Css实现九大行星动画效果的更多相关文章

  1. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  2. css制作简单loading动画效果【css3 loading加载动画】

    曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...

  3. bootstrap.css 进度条没有动画效果

    操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选

  4. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  5. 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  6. 你想不到的!CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  7. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  8. jQuery基础---动画效果

    内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性  发文不易,转载请注明出处~ 一.显示.隐藏 jQuery 中显示方法 ...

  9. Jquery11 动画效果

    学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 在以前很长一段时间里,网页上的各种特效还需要采用 flash 在进行. ...

随机推荐

  1. oracle 非数字型转数字型

    原文:oracle 非数字型转数字型 oracle中如果一个字段内容不全是数字型 可以通过以下方式过滤 to_number(substr(translate(a.vital_signs_cvalues ...

  2. The operator == is undefined for the argument type(s) int, null

    package cn.edu.shu.web.test; public class TestInteger { public static void main(String[] args) { /** ...

  3. SQL点滴27—性能分析之执行计划

    原文:SQL点滴27-性能分析之执行计划 一直想找一些关于SQL语句性能调试的权威参考,但是有参考未必就能够做好调试的工作.我深信实践中得到的经验是最珍贵的,书本知识只是一个引导.本篇来源于<I ...

  4. 关于标准I/O缓冲区和fork函数

    标准I/O库提供缓冲的目的是尽可能减少使用read和write调用的次数.标准I/O提供三个类型的缓冲:全缓冲.行缓冲和不带缓冲.标准输入(stdin)和标准输出(stdout)是行缓冲,标准出错(s ...

  5. Lua 5.2 Reference Manual

    Lua 5.2 Reference Manual.pdf

  6. android 删除SD卡或手机的缓存图像和文件夹

    public static final String TEMP_PHOTO_FILE_NAME = "temp_photo.jpg"; private static String ...

  7. .net的页面在大并发下出现503错误

    .net的页面在大并发下偶尔出现503错误 我们开发了一个回调页面,由一个工具负责调用,由于压力非常大,回调页面通过6台服务器负载均衡的: 最近业务系统又再次扩容,回调页面压力成倍增加,在高峰时间段偶 ...

  8. Scala 的 Web 框架 Lift 开始 3.0 版本开发

    Scala 的 Web 框架 Lift 开始 3.0 版本开发 http://demo.liftweb.net/ http://liftweb.net/download Lift 框架在不断的成长和改 ...

  9. linux 启动oracle报cannot restore segment prot after reloc: Permission denied

    error while loading shared libraries: $ORACLE_HOME/lib/libnnz10.so: cannot restore segment prot afte ...

  10. jsonp总结

    由于“同源策略”的限制,ajax不能做跨域请求,jsonp是当下解决跨域请求最流行的方案,来个例子(index.html): <!doctype html> <html lang=& ...