[CSS3技术]不用图片和JS，照样创建绚丽的动态CSS3菜单

楼主^#

更多发布于：2015-02-24 15:53

图片 background 动态 animation 黄色

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

图片：133013jc6kbcz9gdavg6f8.jpg

Demo演示下载代码

第一步：编辑菜单的HTML代码
菜单包含三个列表项，分别取名为“Menu1”、“Menu2”、“Menu3”。

1
2
3
4
5
6
7
8

view plaincopy to clipboardprint?

Menu1
Menu2
Menu3

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

1
2
3
4
5
6
7

view plaincopy to clipboardprint?
.css3Menus {
background: #14080a;
width:506px;
height:260px;
padding:20px;
}

如下图：

图片：133013jc6kbcz9gdavg6f8.jpg

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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;
}

菜单看起来呈下面样子：

图片：133013jc6kbcz9gdavg6f8.jpg

<span style="line-height: 1.8em;">[/td][/tr]

喜欢10 评分0

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

[CSS3技术]不用图片和JS，照样创建绚丽的动态CSS3菜单

最新喜欢：