转自：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>
分享到：
相关推荐
NULL 博文链接：https://fins.iteye.com/blog/623475
随着互联网的发展，网页能...下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单。 下面是效果图： 查看示例（请在支持css3的浏览器中查看效果，最新版的chrome浏览器下效果最佳。） 纯css
-Button控件将不再自动拥有display:inline属性，如果希望两个按钮在一行显示，请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
-增加示例(iframe/parent_postback_run3.aspx)，如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性，增加CollapseMode, ...
带有黑色背景的固定标题，位于页面顶部，包含主菜单。 带蓝色背景的折叠标题，包含有关特价的额外信息。 用户滚动到折叠标题的白色背景的其余内容。 折叠标头非常适合用户体验。用户可以在想要查看特殊信息时随时...
制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标放在一个连接上，会显示图片(类似tooltip) 使用microsoft.web.ui...
06 django的一个简单应用 07 django静态文件之static 08 django的url控制系统 09 django的urlConf补充 第50章 01 django之视图函数的介绍 02 django视图之redirec 03 django模板之变量 04 django模板之过滤器 05 ...
第一个python程序 变量 字符编码与二进制 字符编码的区别与介绍 用户交互程序 if else流程判断 while 循环 while 循环优化版本 for 循环及作业要求 第2周 本节鸡汤 模块初识 pyc是什么 python数据类型 bytes数据...
11.1.2 编写一个简单的控件 11.1.3 将Web窗体转换成用户控件 11.2 自定义控件 11.2.1 实现自定义控件 11.2.2 复合自定义控件 11.3 用户控件和自定义控件的异同 11.4 用户控件示例 11.4.1 ASP.NET登录控件 11.4.2 ASP...
11.1.2 编写一个简单的控件 11.1.3 将Web窗体转换成用户控件 11.2 自定义控件 11.2.1 实现自定义控件 11.2.2 复合自定义控件 11.3 用户控件和自定义控件的异同 11.4 用户控件示例 11.4.1 ASP.NET登录控件 11.4.2 ASP...
11.1.2 编写一个简单的控件 11.1.3 将Web 窗体转换成用户控件 11.2 自定义控件 11.2.1 实现自定义控件 11.2.2 复合自定义控件 11.3 用户控件和自定义控件的异同 11.4 用户控件示例 11.4.1 ASP.NET 登录控件 11.4.2 ...
<<<<<<< HEAD该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。... 在服务器上生成动态<meta>标记 预渲染为静态HTML
11.1.2 编写一个简单的控件 11.1.3 将Web窗体转换成用户控件 11.2 自定义控件 11.2.1 实现自定义控件 11.2.2 复合自定义控件 11.3 用户控件和自定义控件的异同 11.4 用户控件示例 11.4.1 ASP.NET登录控件 11.4.2 ASP...
简单聊天软件CS模式 2个目标文件 一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 ...
11.1.2 编写一个简单的控件 11.1.3 将Web窗体转换成用户控件 11.2 自定义控件 11.2.1 实现自定义控件 11.2.2 复合自定义控件 11.3 用户控件和自定义控件的异同 11.4 用户控件示例 11.4.1 ASP.NET登录控件 11.4.2 ASP...
11.1.2 编写一个简单的控件 11.1.3 将Web窗体转换成用户控件 11.2 自定义控件 11.2.1 实现自定义控件 11.2.2 复合自定义控件 11.3 用户控件和自定义控件的异同 11.4 用户控件示例 11.4.1 ASP.NET登录控件 11.4.2 ASP...
个人网站主页： 代码： 关于： 如何使用创建一个菜单栏和页脚。 我使用创建的工具进行所有HTML ， CSS和Javascript实验。 制作完菜单栏和页脚后，将它们分别添加到resources/navbar.html和resources/footer.html 。 ...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化，用函数分别实现 2、对文件的加密，解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型（源代码...
->欢迎屏幕（操作按钮：开始）-堆栈->主屏幕（抽屉菜单-默认菜单：商店主页）-抽屉->商店主页（横幅和前十名商店列表）-堆叠->商店列表（单击商店卡）->商店详细信息->关于我们->联系我们 其他 添加自定义字体（使用...