第一步：编辑菜单的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;}
}
|
|
|
|
浙公网安备 33010602011771号