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

时间: 2013-12-10 分类: CSS 作者: SAI

TAGS:

该教程,我们将讨论CSS3的一些新功能和新特性,并教你在不使用图片和JavaScript的情况下,如何制作酷炫的圆形导航菜单。该实例将用到CSS3的新特性: border-radius和animation。

133013jc6kbcz9gdavg6f8.jpg

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

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

 

1
2
3
4
5
6
7
8
view plaincopy to clipboardprint?
<div class=“css3Menus”> 
<ul> 
<li>Menu1</li> 
<li>Menu2</li> 
<li>Menu3</li> 
</ul> 
</div>

 

第二步:设置菜单的背景

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

 

1
2
3
4
5
6
7
view plaincopy to clipboardprint?
.css3Menus { 
background: #14080a; 
width:06px; 
height:260px; 
padding:20px; 
}

 

如下图:

133056f3fvwwvi2021mmz0.jpg

第三步:利用border-radius,制作圆形导航。

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
view plaincopy to clipboardprint?
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; 
}

菜单看起来呈下面样子: 133110axckys58pyaxapwk.jpg

第四步:设置菜单的对齐方式 本步骤中,我们将为每个列表项设置特定的背景颜色与位置:

1
2
3
4
5
6
7
8
9
10
11
12
view plaincopy to clipboardprint?
li#menu1 { 
background-color: #00FFCC; 
} 
li#menu2 { 
background-color: #CC9900; 
margin-top:100px; 
} 
li#menu3 { 
background-color: #33FF66; 
margin-top:50px; 
}

现在菜单看起来呈下面样子:

1331237z7zy749cd2c3xc2.jpg

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
view plaincopy to clipboardprint?
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; 
}

菜单现阶段的样子:

1331357iz1i1riwrsnuybx.jpg

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

1
2
3
4
5
6
7
8
9
10
11
12
view plaincopy to clipboardprint?
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; 
}

菜单样式如图:

13314693ycy94buk893554.jpg

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

1
2
3
4
5
6
7
8
9
10
11
view plaincopy to clipboardprint?
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 0 0;} 
to{margin:120px 40px 0 0;}

菜单所产生的动画效果:

133200dqa8kd0a08d40daa.jpg

结论

      通过上面教程,你已经学到如何制作酷的动画菜单。在制作过程中不需要使用JavaScript和图片,只需要使用CSS3的一些酷的特性即可。该菜单可以完美地运行于Chrome和 Safari浏览器。在 Firefox浏览器中,无法看到动画效果。

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » 不用图片和JS,照样创建绚丽的动态CSS3菜单
本文地址:http://www.saiody.com/?p=935

返回顶部