`

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 也可以


0
0
分享到:
评论

相关推荐

    CSS3 实现的一个简单的\"动态主菜单\" 示例

    在本文中,我们将深入探讨如何使用CSS3来创建一个动态主菜单。这个示例通过引入动画效果和交互性,使得用户界面更加吸引人且易于导航。我们参考的资源是一个名为"animate_ui.html"的文件,这很可能是实现该菜单效果...

    纯CSS3圆形主菜单展开特效.zip

    "纯CSS3圆形主菜单展开特效"就是这样一个例子,它通过CSS3的强大功能,实现了在鼠标悬停时,子菜单以动态、优雅的方式环绕主菜单展开,给用户带来独特的交互体验。 首先,我们要理解CSS3的含义。CSS3是层叠样式表...

    纯CSS3实现炫酷圆形主菜单动画展开收起特效源码.zip

    【标题】中的“纯CSS3实现炫酷圆形主菜单动画展开收起特效源码”表明这是一个使用纯CSS3技术创建的交互式前端设计项目,主要特点是圆形的主菜单,具有展开和收起的动画效果。在前端开发中,CSS3(层叠样式表第三版)...

    使用div和css 实现的动态菜单源码

    本教程将探讨如何使用它们来创建动态菜单,一个交互性强、视觉效果吸引人的网站导航元素。 一、`div` 元素简介 `div`(division)是HTML中的一个块级元素,用于对网页内容进行分组和布局。它自身没有特定的含义,但...

    纯CSS3实现的iPhone样式的3D菜单特效源码.zip

    在本资源中,我们拥有一个名为“纯CSS3实现的iPhone样式的3D菜单特效源码.zip”的压缩包,它包含了一个使用纯CSS3技术构建的、模仿iPhone样式的3D菜单效果。这个源码是为网页设计师和开发者提供的一种创新的交互式...

    二级树形菜单示例:CSS+TreeMenu

    总的来说,这个“二级树形菜单示例:CSS+TreeMenu”提供了一个基础模板,帮助开发者了解如何使用纯CSS来创建功能完备的二级菜单。通过学习和实践,你可以根据项目需求进行定制,打造出更加复杂和个性化的菜单系统。

    实现的筋斗云动态菜单

    "实现的筋斗云动态菜单"是一个项目,旨在创建一个具有动态效果的菜单系统,可能应用于网站或应用程序中,以提供更加生动且交互性强的用户体验。动态菜单在现代Web开发中非常常见,它能帮助用户更高效地导航,并提升...

    纯CSS3炫酷圆形导航菜单特效

    总的来说,"纯CSS3炫酷圆形导航菜单特效"是现代网页设计中一个吸引人的示例,它充分利用了CSS3的新特性,创造出动态且互动性强的界面元素。设计师和开发者可以通过学习这个特效,进一步掌握CSS3的高级技巧,提升网页...

    超实用的CSS3横向二级下拉主菜单导航特效源码.zip

    这个源码示例将这些CSS3特性巧妙结合,构建了一个既实用又美观的横向二级下拉主菜单。它可能是基于HTML结构,使用了`<ul>`和`<li>`元素来组织菜单项,并通过CSS3选择器来定位和样式化这些元素。源码可能还包含了一些...

    jQuery和CSS3滑动展开菜单按钮插件

    这款插件通过jQuery的事件处理和CSS3的过渡效果,实现了在用户点击主菜单按钮后,子菜单平滑地展开,为用户带来流畅的操作体验。 **一、jQuery库** jQuery是一个高效、简洁且易用的JavaScript库,它简化了HTML文档...

    jquery css 主菜单跳转样式

    `jQuery` 和 `CSS` 的结合使得创建动态、交互式的主菜单成为可能,从而提升用户体验。本文将深入探讨如何利用 `jQuery` 和 `CSS` 实现主菜单的跳转样式。 首先,`CSS`(层叠样式表)是用于定义网页外观和布局的样式...

    CSS3/HTML5仿Windows7开始菜单特效.rar

    标题中的“CSS3/HTML5仿Windows7开始菜单特效”是指使用现代Web技术,即CSS3和HTML5,来创建一个模拟Windows7操作系统开始菜单的效果。这个特效旨在为Web应用程序或网站提供一种熟悉且交互式的用户界面,尤其适用于...

    10多个简洁实用的CSS3导航菜单.rar

    【标题】"10多个简洁实用的CSS3导航菜单"是一个集合,包含了多种设计精巧、功能实用的CSS3导航菜单实例。这些菜单都以CSS3为主要技术手段,旨在为网页设计提供简单而不失优雅的导航解决方案。CSS3是层叠样式表...

    20个精美css导航菜单

    `访问阿里西西.url`是一个快捷方式文件,可能指向一个在线资源,比如关于CSS导航菜单的教程、示例库或者其他相关的设计参考。 最后,`image`目录可能包含其他用于导航菜单的图片资源,如图标、分割线等。在CSS中,...

    CSS3蓝色宽屏二级下拉菜单

    本教程将详细探讨如何利用CSS3实现一个蓝色宽屏的二级下拉菜单,提升网站导航的用户体验。 首先,二级下拉菜单是网页导航栏中的常见元素,它允许用户在主菜单项下进一步探索子分类。这种结构有助于组织大量链接,使...

    纯CSS3实现的迷你图标导航菜单效果(无js).zip

    标题中的“纯CSS3实现的迷你图标导航菜单效果(无js)”表明这是一个关于使用CSS3技术来创建一个没有依赖JavaScript的简洁图标导航菜单的示例。这个项目可能包含了一个或多个HTML文件,CSS样式表,以及可能用到的图片...

    一款漂亮实用的OA系统左侧DIV+CSS菜单

    3. 51bcw.html:可能是另一个示例页面或者与该菜单相关的网页,51bcw可能是开发者或项目的代号。 4. 51bcw下载必读.txt:这可能是一个关于如何正确使用或安装该菜单资源的指南,用户在使用前需要阅读以了解注意事项...

    一款纯CSS3代码实现星系轨道旋转网站菜单特效源码.zip

    这款名为“纯CSS3代码实现星系轨道旋转网站菜单特效源码”的项目,是一个创新的前端设计示例,它利用了CSS3的强大功能来创建一个动态且引人入胜的网站菜单。在现代网页设计中,用户体验和视觉吸引力是至关重要的,而...

    css3仿小米官网导航下拉菜单代码.zip

    CSS3仿小米官网导航下拉菜单代码是一个实现此类交互效果的示例,它结合了JavaScript(JS)和层叠样式表(CSS3)技术,旨在为用户提供与小米官网相似的下拉菜单体验。 首先,我们需要理解CSS3在其中的角色。CSS3是...

Global site tag (gtag.js) - Google Analytics