CSS3 实现的一个简单的"动态主菜单" 示例[转]

其实这个示例蛮无聊的 很简单 也没什么实际的用处.

主要是展示了 CSS3 如何实现动画效果.

写这个主要是想看一看 完成这样的效果 我到底要写多少代码. 
同时和我熟悉的java做个比较.

比较结果不用我说大家也知道.

用java来实现示例中的效果 如果不借助第三方的框架 编码量将是相当大的.

就算用flash 来做 编码量也不小. 
也许有人会说用flash开发这么一个东西, 在强大的开发工具的帮助下根本不用编码, 
呵呵 好吧... 
其实这种质疑恰恰证明了为什么很多flash应用看着简单 但是对cpu占用却非常高.

之前我在"闲聊"里说过:"从技术角度来讲,HTML5+CSS3+JS太适合做休闲类游戏了" 
大家想想,用canvas svg webgl等技术 来做游戏主体, js来做游戏开发语言(同时也可以用来做脚本), 利用html5 css3的优雅特性来做游戏的UI(就是菜单 对话框 操作控制台一类的东西).这样不是很好吗?

不废话了 大家看附件中的示例吧.

请使用 Chrome 4.x 或以上版本进行预览. (我用的是 4.1 )

补充 : safari 4 也可以

animate_ui.zip (855 Bytes)

时间： 2024-10-09 21:47:50

CSS3 实现的一个简单的"动态主菜单" 示例[转]的相关文章

【Unity Shaders】Reflecting Your World —— 在Unity3D中创建一个简单的动态Cubemap系统

本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源(当然你也可以从官网下载). ========================================== 分割线 ========================================== 写在前面 我们已经学了很多关于反射的内容,但是我们现在的反射并不能实时反射,即当反射物体移动时它们不

一个简单的负载均衡的示例

参考地址:http://www.nginx.cn/doc/example/loadbanlance.html 一个简单的负载均衡的示例,把www.domain.com均衡到本机不同的端口,也可以改为均衡到不同的地址上.> http { : upstream myproject { : server 127.0.0.1:8000 weight=3; : server 127.0.0.1:8001; : server 127.0.0.1:8002; : server 127.0.0.1:8003;

一个简单 JDK 动态代理的实例

动态代理的步骤: 创建一个实现了 InvocationHandler 接口的类,必须重写接口里的 invoke()方法. 创建被代理的类和接口 通过 Proxy 的静态方法 newProxyInsatance(ClassLoader loader,Class[] interfaces,InvocationHandler,handler) 来创建一个代理 通过代理来调用方法 简单的动态代理实例 1 package com.sean.zzzjvm; 2 3 import java.lang.refl

一个简单的java僵局演示示例

在实际编程,为了避免死锁情况,但是,让你写一个有用的程序死锁似几乎不要太简单(种面试题),下面是一个简单的死锁样例. 线程的同步化可能会造成死锁,死锁发生在两个线程相互持有对方正在等待的东西(实际是两个线程共享的东西).仅仅要有两个线程和两个对象就可能产生死锁. package sxh.java.lock; /** * 一个简单的死锁类 * 当DeadLock类的对象flag==1时(td1),先锁定o1,睡眠500毫秒 * 而td1在睡眠的时候还有一个flag==0的对象(td2)线程启动,先

从一个简单的Java单例示例谈谈并发

一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这么写 public class UnsafeLazyInitiallization { private static UnsafeLazyInitiallization instance; private UnsafeLazyInitiallization() { } public static UnsafeLazyInitiallization getInstance(){ if(instance==null){ /

从一个简单的Java单例示例谈谈并发 JMM JUC

原文: http://www.open-open.com/lib/view/open1462871898428.html 一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这么写 public class UnsafeLazyInitiallization { private static UnsafeLazyInitiallization instance; private UnsafeLazyInitiallization() { } public static U

一个简单的Java单例示例谈谈并发

一个简单的单例示例 单例模式可能是大家经常接触和使用的一个设计模式,你可能会这么写 public class UnsafeLazyInitiallization { private static UnsafeLazyInitiallization instance; private UnsafeLazyInitiallization() { } public static UnsafeLazyInitiallization getInstance(){ if(instance==null){ /

一个简单的Kubernetes应用部署示例

说明 我们通过一个示例来演示一下kubernetes部署应用的基本配置. 这个示例相对比较简单,就是一个tomcat应用加上一个mysql数据库 在tomcat里运行一个简单的webappp,这个app会访问Mysql获取数据.并展示在页面上.为了演示和简化的目的,只要程序正确连接到了数据库上,它就会自动完成对应的table的创建与初始化数据的准备工作.所以当我们通过浏览器访问此应用的时候,就会显示一个表格的页面,数据则来自数据库. 配置 我们在/root/k8s-yaml/目录下创建一个web

封装一个简单的动态数组

package com.immoc; import java.util.ArrayList; import java.util.List; /** * 实现动态数组 * */ public class Array <E> { private E[]data;; private int size; public Array(int capacity){ data = (E[]) new Object[capacity]; size = 0; } public Array(){ this(10);