nav制作 - 爱码网

导航栏制作

简单介绍几个属性

1.linear-gradient属性
用线性渐变创建图像。
如果想创建以对角线方式渐变的图像，可以使用 to top left 这样的多关键字方式来实现。
用默认的渐变方向绘制一个最简单的线性渐变。
nav制作

2.rgba属性
如：border:1px solid rgba(0,0,0,0.1);
意思是设定元素的边框为1像素宽，实线，颜色使用rgba来表达。
其中，rgba是CSS3中的属性，rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。

3.text-transform属性
text-transform 属性控制文本的大小写。
nav制作

4.perspective 属性
该属性用来**一个3D空间。
当为元素定义perspective属性时，其子元素都会获得透视效果（使用了3D变换的元素）。所以一般来说perspective属性都应用在父元素上，我们可以把这个父元素称为舞台元素。
nav制作

Transform变形（3D转换）

3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；

在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。这种变形的特点是，使用三维向量的坐标定义元素在每个方向移动多少。
随着px的增加，直观效果上：

X：从左向右移动
Y：从上向下移动
Z：以方框中心为原点，变大

3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；

在三维变形中，我们可以让元素在任何轴旋转。为此，CSS3新增三个旋转函数：rotateX()、rotateY()和rotateZ()。
随着度数的增加，直观效果上：

X：以方框X轴，从下向上旋转
Y：以方框y轴，从左向右旋转
Z：以方框中心为原点，顺时针旋转

rotate3d()中取值说明：
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；

通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１大于0.01时，元素缩小。当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。
随着放大倍数的增加，直观效果上：

X：以方框Y轴，左右变宽
Y：以方框X轴，上下变高
Z：看不出变换。scaleZ()和scale3d()函数单独使用时没有任何效果。

3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。

CSS3中的3D矩阵要比2D中的矩阵复杂的多了，从二维到三维，是从４到９；而在矩阵里头是33变成44，９到16了。话说又说回来，对于3D矩阵而言，本质上很多东西都与2D一致的，只是复杂程度不一样而已。3D矩阵即为透视投影。

关于导航栏

导航栏=链接列表
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 < ul> 和 < li>元素非常有意义。

如：
nav制作

再添加相应的css属性即可。

实例：

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>My Nav</title>
    <link rel="stylesheet" href="daohang.css">
</head>
<body>  
    <div class="container">
        <ul class="menu">
            <li><a href="#">故梦</a></li>
            <li><a href="#">时光纪</a>
                <ul class="submenu">
                    <li><a href="#">父与子</a></li>
                    <li><a href="#">母与子</a></li>
                    <li><a href="#">全家福</a></li>
                </ul>
                
            </li>
            <li><a href="#">生活的音筒</a></li>
            <li><a href="#">我的家啊</a>
                <ul class="submenu">
                    <li><a href="#">汤逊湖</a></li>
                    <li><a href="#">生态园</a></li>
                    <li><a href="#">一封家书</a></li>
                    <li><a href="#">家训</a></li>
                </ul>
            </li>
            <li><a href="#">表情包</a></li>
            <li><a href="#">寄语</a></li>
        </ul>
    </div>

</body>
</html>

css代码：

*{
padding: 0;
margin: 0;
list-style: none;
}


.container{
    margin:30px;
    width: 50%;
}

.container .menu{
    height: 30px;
    margin-bottom: 5px;
}
.menu li{
    
    min-width: 140px;
    background: linear-gradient(#008080,#2f6f4f);/*渐变*/
}
 .menu>li{
    color: #FFFAFA;
    float: left;
    position: relative;
}
.menu>li:first{
    border-radius: 5px 0 0 0;
}
.menu a{
    color: #FFFAFA;
    display: block;
    text-decoration: none;
    text-align: center;
    color:black;
    padding: 0 25px;
    font-size: 18px;
    line-height: 36px;
    border-left: 3px solid rgba(0, 0, 0, 0);
    /*border:3px solid rgba(0,0,0,0.0);
    意思是 设定元素的边框为3像素宽，实线，颜色使用rgba来表达。其中，rgba是CSS3中的属性，rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。*/
    text-transform: uppercase;  /*定义仅有大写字母*/


}
.menu li:hover{
    background: linear-gradient(#008080,#424242);   /*定义鼠标触碰时的样式*/
}
.menu li:hover>a{
   color:white;
   border-left: 3px solid #FFFFFF;
}

.submenu{
    position: absolute;
    max-height: 0;
    left: 0;
    top: 100%;
    z-index: 0;
    perspective: 400px;    
}
.submenu li{
   opacity:1;
   transform: rotate3d(0,1,0,90deg);
   transition: opacity .4s, transform .5s;   /*制作旋转效果*/
}


.menu>li:hover .submenu{
    max-height: 1000px;
    z-index: 10px;
}
.menu>li:hover .submenu li{
    opacity: 1;
    transform: rotate3d(0,0,0,0deg);
}

.submenu li:nth-child(1) {

    transition-delay: 0ms;
}
.submenu li:nth-child(2) {

    transition-delay: 100ms;
}
.submenu li:nth-child(3) {

    transition-delay: 200ms;
}
.submenu li:nth-child(4) {

    transition-delay: 300ms;
}
.submenu li:nth-child(5) {

    transition-delay: 400ms;
}
/*定义小标签的翻转时间，错开会让导航栏更炫酷*/

效果展示：

nav制作