3D二级旋转导航栏

1 效果图

2 代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"  href="index.css">
</head>

<body>
    <nav>
        <ul>
            <li>
                <a href="#">首页</a>
                <ul class="subnav">
                    <li>
                        <a href="#">我</a>
                    </li>
                    <li>
                        <a href="#">你</a>
                    </li>
                    <li>
                        <a href="#">她</a>
                    </li>
                    <li>
                        <a href="#">他</a>
                    </li>
                    <li>
                        <a href="#">好</a>
                    </li>
                    <li>
                        <a href="#">吗</a>
                    </li>
                </ul>
            </li>
    </nav>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
	list-style:none;
}
body {
    background: #ccc;
}
/* 设置一级导航栏 */
nav {
    width: 150px;
    margin: 100px auto;
    height: 50px;
    position: relative;
    background: #252525;
}
nav li:hover {
    background: #fff;
}
nav>ul>li {
    position: relative;
    width: 150px;
    height: 50px;
}
a {
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    display: block;
    text-align: center;
    color: red;
}
/* 二级导航栏开始 */
.subnav {
    position: absolute;
    top: 50px;
    left: 0;
    width: 150px;
    perspective: 400px;
    max-height: 0;
    /* 设置视角及过渡时高度不超过 */
}
.subnav li {
    background: #000;
    opacity: 0;
    transform: rotateY(90deg);
    /* 初始时其Y轴是旋转90 */
    transition: all .4s;
}
nav>ul>li:hover .subnav li {
    transform: none;
    /* 鼠标经过时Y轴恢复正常 */
    opacity: 1;
}
/* 设置鼠标离开时的过渡效果，鼠标悬停时权重较高将其效果覆盖 */
.subnav li:nth-child(1){
    transition-delay: 250ms;   
    background: #B820B8;
}
.subnav li:nth-child(2){
    transition-delay: 200ms; 
    background: #2698A6; 
}
.subnav li:nth-child(3){
    transition-delay: 150ms;  
    background: #25A13D;
}
.subnav li:nth-child(4){
    background: #E1861A;
    transition-delay: 100ms;  
}
.subnav li:nth-child(5){
    background: #2698A6;
    transition-delay: 50ms;  
}
.subnav li:nth-child(6){
    background: #2723DF;
    transition-delay: 0ms;  
}
/* 鼠标悬停时过渡效果 */
nav>ul>li:hover .subnav li:nth-child(1) {
       transition-delay: 0s;
}
nav>ul>li:hover .subnav li:nth-child(2){
       transition-delay: 50ms;
}
nav>ul>li:hover .subnav li:nth-child(3) {
       transition-delay: 100ms;
}
nav>ul>li:hover .subnav li:nth-child(4) {
       transition-delay: 150ms;
}	
nav>ul>li:hover .subnav li:nth-child(5){
       transition-delay: 200ms;
}
nav>ul>li:hover .subnav li:nth-child(6) {
       transition-delay: 250ms;
}
3D二级旋转导航栏

猜你喜欢
