转自：http://fins.iteye.com/blog/623475
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animate UI</title>
<style type="text/css">
body {
border : 0px;
padding : 0px;
margin : 0px;
overflow:hidden;
font-size : 13px;
-webkit-user-select : none;
-webkit-cursor: url("redarrow.cur");
}
div {
border : 1px solid blue;
background-color : #ffffff;
text-align : center;
margin : auto;
}
#gindex {
position:absolute;
width:640px;
height:480px;
}
#gtitle {
position:relative;
width : 300px;
height : 100px;
top : 40px;
}
#gmenu {
position:relative;
width : 230px;
top : 60px;
}
#gmenu div {
height : 20px;
margin : 8px;
cursor : pointer;
}
#glogo {
position:absolute;
width : 100px;
height : 50px;
right : 15px;
bottom : 15px;
}
#gexit {
position:absolute;
width : 100px;
height : 50px;
left : 15px;
bottom : 15px;
}
#gmenu div:hover , #gexit:hover, #glogo:hover {
-webkit-transform: scale(1.2);
}
@-webkit-keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
}
@-webkit-keyframes gtitle-show {
0% { top: 100px; }
50% { top: 100px; }
100% { top: 40px; }
}
.gtitle-show {
-webkit-animation-name: gtitle-show;
-webkit-animation-duration: 4s;
}
@-webkit-keyframes gmenu-show {
0% { top:-600px; opacity: 0; }
59% { top:-600px; opacity: 0; }
60% { top:60px; opacity: 0; }
100% { opacity: 1; }
}
.gmenu-show {
-webkit-animation-name: gmenu-show;
-webkit-animation-duration: 5s;
}
</style>
</head>
<body>
<div id="gindex" class="fade-in">
<div id="gtitle" class="gtitle-show" >Title</div>
<div id="gmenu" class="gmenu-show">
<div>Start</div>
<div>Load</div>
<div>Help</div>
<div>Scores</div>
<div>Credit</div>
</div>
<div id="gexit">Exit</div>
<div id="glogo">Logo</div>
</div>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用CSS3来创建一个动态主菜单。这个示例通过引入动画效果和交互性，使得用户界面更加吸引人且易于导航。我们参考的资源是一个名为"animate_ui.html"的文件，这很可能是实现该菜单效果...
"纯CSS3圆形主菜单展开特效"就是这样一个例子，它通过CSS3的强大功能，实现了在鼠标悬停时，子菜单以动态、优雅的方式环绕主菜单展开，给用户带来独特的交互体验。 首先，我们要理解CSS3的含义。CSS3是层叠样式表...
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
本教程将探讨如何使用它们来创建动态菜单，一个交互性强、视觉效果吸引人的网站导航元素。 一、`div` 元素简介 `div`（division）是HTML中的一个块级元素，用于对网页内容进行分组和布局。它自身没有特定的含义，但...
【标题】中的“纯CSS3实现炫酷圆形主菜单动画展开收起特效源码”表明这是一个使用纯CSS3技术创建的交互式前端设计项目，主要特点是圆形的主菜单，具有展开和收起的动画效果。在前端开发中，CSS3（层叠样式表第三版）...
在这个“手机菜单特效 - jQuery和css3全屏导航菜单圆形气泡动画特效”项目中，我们探讨了如何利用现代Web技术，尤其是jQuery和CSS3，为移动设备创建一个吸引人的、交互式的全屏导航菜单。这个菜单采用了独特的圆形...
总的来说，这个“二级树形菜单示例：CSS+TreeMenu”提供了一个基础模板，帮助开发者了解如何使用纯CSS来创建功能完备的二级菜单。通过学习和实践，你可以根据项目需求进行定制，打造出更加复杂和个性化的菜单系统。
这个"非常好看的css布局-深蓝色"是一个专门关于CSS布局设计的示例，其特色在于深蓝色的主题色调，为用户提供了一种优雅而专业的视觉体验。 首先，我们来看`templatemo_style.css`文件，这是CSS样式表文件，它包含了...
"实现的筋斗云动态菜单"是一个项目，旨在创建一个具有动态效果的菜单系统，可能应用于网站或应用程序中，以提供更加生动且交互性强的用户体验。动态菜单在现代Web开发中非常常见，它能帮助用户更高效地导航，并提升...
这款插件通过jQuery的事件处理和CSS3的过渡效果，实现了在用户点击主菜单按钮后，子菜单平滑地展开，为用户带来流畅的操作体验。 **一、jQuery库** jQuery是一个高效、简洁且易用的JavaScript库，它简化了HTML文档...
"circular-menu" 是一个利用JavaScript（js）和CSS3技术实现的圆形导航菜单插件，它以其独特的视觉效果和交互体验吸引用户注意力。 ### 插件特点 1. **圆形布局**：此插件以圆形布局展示导航菜单项，这种设计打破...
在本资源中，我们拥有一个名为“纯CSS3实现的iPhone样式的3D菜单特效源码.zip”的压缩包，它包含了一个使用纯CSS3技术构建的、模仿iPhone样式的3D菜单效果。这个源码是为网页设计师和开发者提供的一种创新的交互式...
在这个案例中，“js+css3交互式圆形图标菜单导航代码”就是一个很好的示例，它利用JavaScript和CSS3的强大功能，为用户提供了直观且有趣的菜单导航体验。下面将详细介绍这个项目中的核心技术和实现方式。 首先，...
总的来说，"纯CSS3炫酷圆形导航菜单特效"是现代网页设计中一个吸引人的示例，它充分利用了CSS3的新特性，创造出动态且互动性强的界面元素。设计师和开发者可以通过学习这个特效，进一步掌握CSS3的高级技巧，提升网页...
标题中的“CSS3/HTML5仿Windows7开始菜单特效”是指使用现代Web技术，即CSS3和HTML5，来创建一个模拟Windows7操作系统开始菜单的效果。这个特效旨在为Web应用程序或网站提供一种熟悉且交互式的用户界面，尤其适用于...
`jQuery` 和 `CSS` 的结合使得创建动态、交互式的主菜单成为可能，从而提升用户体验。本文将深入探讨如何利用 `jQuery` 和 `CSS` 实现主菜单的跳转样式。 首先，`CSS`（层叠样式表）是用于定义网页外观和布局的样式...
这个源码示例将这些CSS3特性巧妙结合，构建了一个既实用又美观的横向二级下拉主菜单。它可能是基于HTML结构，使用了`<ul>`和`<li>`元素来组织菜单项，并通过CSS3选择器来定位和样式化这些元素。源码可能还包含了一些...
【标题】"10多个简洁实用的CSS3导航菜单"是一个集合，包含了多种设计精巧、功能实用的CSS3导航菜单实例。这些菜单都以CSS3为主要技术手段，旨在为网页设计提供简单而不失优雅的导航解决方案。CSS3是层叠样式表...
这款名为“纯CSS3代码实现星系轨道旋转网站菜单特效源码”的项目，是一个创新的前端设计示例，它利用了CSS3的强大功能来创建一个动态且引人入胜的网站菜单。在现代网页设计中，用户体验和视觉吸引力是至关重要的，而...