一个简单的CSS3导航栏的实现

本文主要介绍了CSS3的一个简单的导航栏。它不需要被用于Javaｓｃｒｉｐｔ。在文章的最后，有demo，你需要的朋友可以参考一下。

以上是一个效果图，代码如下：

HTML

xml代码将内容复制到剪贴板。
首页
Web前端
Javaｓｃｒｉｐｔ
jQuery
CSS
HTML

后端
蟒蛇
PHP

小杂波
Linux
Ajax

我的生活
学院
回顾
情绪

关于我的
友情链接
留言板

Css：

CSS代码将内容复制到剪贴板。
* {
保证金：0汽车；
}
体{
背景颜色：# eeeeee；
字体：微软雅黑、Arial、无衬线字体；
}
资产净值{
宽度：100%；
背景颜色：# 455552；
职位：相对；
宽度：650px；
边距：100px；
}
资产净值{
列表样式：无；
}
导航项
显示：内联块；
职位：相对；
}
资产净值
文字装饰：无；
颜色：# FFF；
显示：内联块；
填料：10px 20px；
}
导航号：悬停{
背景颜色：# 1abc9c；
}
导航：a
不透明性：1；
WebKit的变换：rotatey（0度）；
变换：rotatey（0度）；
}
导航系统
列表样式：无；
位置：绝对；
过渡：透明度0.5s；
WebKit的角度：800；
WebKit的变换风格：preserve-3d；
}
导航等级：
不透明性：1；
WebKit的变换：rotatey（0度）；
变换：rotatey（0度）；
}
导航系统
职位：相对；
左：- 40px；
不透明性：0；
宽度：150px；
过渡：变换0.8s 1.5s，不透明；
}
导航等级为
显示：内联块；
宽度：75%；
背景颜色：RGBA（26188, 156，0.75）；
}
nav-effect-1 {。
变换：rotatey（90度）translatex（10px）；
}
nav-effect-2 {。
变换：rotatey（120deg）translatex（20px）；
}
nav-effect-3 {。
变换：rotatey（150deg）translatex（30px）；
}
nav-effect-4 {。
变换：rotatey（180deg）translatex（40px）；
}
导航号：
背景颜色：RGBA（69,85，82，0.75）；
}

看看演示：演示