不用图片和JS创建绚丽的动态CSS3菜单

　第一步：编辑菜单的HTML代码

　　菜单包含三个列表项，分别取名为“Menu1”、“Menu2”、“Menu3”。

?


1

2

3

4

5

6

7

<divclass="css3Menus">  

<ul>  

    <li>Menu1</li>  

    <li>Menu2</li>  

    <li>Menu3</li>  

</ul>  

</div>

　　第二步：设置菜单的背景

　　在该步骤中，我们将把导航的背景设置为黑色。宽度、高度和内边距为可选项，可以不设置。

?


1
.css3Menus {  

background: #14080a;  

width:506px;  

height:260px;  

padding:20px;  

}

第三步：利用border-radius，制作圆形导航。

　　该步中，我们会利用CSS3的一些酷的功能，尤其是border-radius ，将每个列表项的背景设置为黄色，形状为圆形。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

ul {  

list-style: none;  

}  

 

li {  

float:left;  

font: 14px/10px Arial, Verdana, sans-serif;  

color:#FFF;  

background-color:#CCCC00;  

width: 80px;  

height: 80px;  

padding:20px;  

margin:0 30px 0 0;  

-webkit-border-radius: 60px;  

-moz-border-radius: 60px;  

border-radius: 60px;  

}

 第四步：设置菜单的对齐方式

　　本步骤中，我们将为每个列表项设置特定的背景颜色与位置：

?
li#menu1 {  

background-color: #00FFCC;  

}  

li#menu2 {  

background-color: #CC9900;  

margin-top:100px;  

}  

li#menu3 {  

background-color: #33FF66;  

margin-top:50px;
} 

第五步：设置菜单中链接的对齐方式

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21


li a {  

color:#FFF;  

text-decoration:none;  

display:block;  

width: 80px;  

height: 45px; text-align: center;  

padding:35px 0 0 0;  

margin:0 40px 0 0;  

-webkit-border-radius: 40px;  

-moz-border-radius: 40px;  

border-radius: 40px;  

}  

li#menu1 a {  

background-color: #FF0000;  

}  

li#menu2 a {  

background-color: #660033;  

}  

li#menu3 a {  

background-color: #66CCCC;  

}

第六步：定义另一种效果，当鼠标悬浮在链接上时进行展现 

?


1

2

3

4

5

6

7

8

9

10

11


li a:hover,  

li a:focus,  

li a:active {  

width: 120px;  

height:65px;  

padding:55px 0 0 0;  

margin:-20px 0 0 -20px;  

-webkit-border-radius: 60px;  

-moz-border-radius: 60px;  

border-radius: 60px;  

}


 　第七步：最后为导航增加动画效果

?


1

2

3

4

5

6

7

8

9

10

11

li a:hover,  

li a:focus,  

li a:active {  

-webkit-animation-name:bounce;  

-webkit-animation-duration:1s;  

-webkit-animation-iteration-count:4;  

-webkit-animation-direction:alternate;  

}  

@-webkit-keyframes bounce{from{margin:0 40px 00;}  

to{margin:120px 40px 0 0;}  

}

 

时间： 2024-09-29 21:03:15

不用图片和JS创建绚丽的动态CSS3菜单的相关文章

【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI

注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. Part 5: Creating a Dynamic UI with Knockout.js 第5部分:用Knockout.js创建动态UI 本文引自:http://www.asp.net/web-api/overview/creating-web-apis/using-web-api-with-entity-framework/using-web-api-with-entity-fra

js:对象的创建(基于组合和动态原型)

基于原型的创建虽然可以有效地完成封装,但是依然存在如下问题: 1.无法通过构造函数来设置属性值 2.当属性中有引用类型变量时,可能存在变量值重复 function Person(){ } Person.prototype = { constructor:Person, name:"Leon", age:30, friends:["Ada","Chris"], say:function(){ alert(this.name+"["

js创建表格

<!-- 动态生成表格 ,删除 修改--> <html> <head> <meta content="text/html;charset=utf-8"> <script type="text/javascript"> var ary=new Array(); ary.push( new stud("1","aaa","12","B&quo

HTML5 file API加canvas实现图片前端JS压缩并上传 （转载）

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

Odyssey.js – 创建互动的，有吸引力的故事

Odyssey.js 是一个开源工具,它可以让你的地图,叙述和其他多媒体结合成一个美丽的故事.创建新的故事很简单,要求无非是一个现代的 Web 浏览器和一个好的想法.你可以使用现成的模板来控制和设计精美的布局,让你的故事的整体外观和感觉都充满吸引力. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附

使用原生js创建自定义标签

使用原生js创建自定义标签 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA

eclipse 创建maven 项目 动态web工程(出现问题)

Eclipse 创建maven 项目 动态web工程 注:Eclipse版本为(Version: Mars.1 Release (4.5.1))maven版本为(apache-maven-3.3.9) 1. 此处是在你安装好了maven插件的前提下进行的并且配置好了你的maven环境指定好了你的maven的本地仓库.下面就开始maven web项目的搭建 首先:点击新建一个项目maven 2.点击next 3.选择web选项 4.创建你的项目的坐标点击finish完成 5.项目创建完成但是有错误

新产品为了效果，做的比较炫，用了很多的图片和JS，所以前端的性能是很大的问题，分篇记录前端性能优化的一些小经验。

第一篇:HTTP服务器 因tomcat处理静态资源的速度比较慢,所以首先想到的就是把所有静态资源(JS,CSS,image,swf) 提到单独的服务器,用更加快速的HTTP服务器,这里选择了nginx了,nginx相比apache,更加轻量级, 配置更加简单,而且nginx不仅仅是高性能的HTTP服务器,还是高性能的反向代理服务器. 目前很多大型网站都使用了nginx,新浪.网易.QQ等都使用了nginx,说明nginx的稳定性和性能还是非常不错的. 1. nginx 安装(linux) htt

Node.js 创建HTTP服务器（经过测试，这篇文章是靠谱的T_T）

Node.js 创建HTTP服务器 如果我们使用PHP来编写后端的代码时,需要Apache 或者 Nginx 的HTTP 服务器,并配上 mod_php5 模块和php-cgi. 从这个角度看,整个"接收 HTTP 请求并提供 Web 页面"的需求根本不需 要 PHP 来处理. 不过对 Node.js 来说,概念完全不一样了.使用 Node.js 时,我们不仅仅 在实现一个应用,同时还实现了整个 HTTP 服务器.事实上,我们的 Web 应用以及对应的 Web 服务器基本上是一样的.