• 图片演示:

演示图.PNG

鼠标放到一级菜单栏时,二级菜单则会淡出并且从上至下依次反转。鼠标一离开则二级菜单会淡入,并且也会反转。




  • 代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>国民老实人九轩博客www.jiuxuan.xyz-二级菜单淡入淡出反转动画实现</title>
    <style>
 *{
            margin: 0;
 padding: 0;

 }
        .nav{
            width: 400px;
 height: 40px;
 margin: 0 auto;
 margin-top: 100px;
 background-color: black;
 }
        .nav>li{
            list-style: none;
 float: left;
 width: 120px;
 height: 40px;
 background-color: green;
 margin-left: 10px;
 line-height: 40px;
 text-align: center;
 position: relative;
 /*position: relative;相对定位*/
 }
        /*.sub{*/
            /*!*display: none;不显示元素,菜单栏中比较关键的*!*/
            /*display: none;*/
        /*}*/
 .sub{
            width: 120px;
 position: absolute;
 /*position: absolute;绝对定位*/
 left: 0;
 top: 40px;
 }
        .sub li{
            list-style: none;
 background-color: pink;
 transform: rotateY(180deg);
 transition: all 1s;
 opacity: 0;
 /*opacity: 1px;透明度*/
 }
        /*.nav>li:hover .sub{*/
            /*!*可以实现二级菜单的展出,但是动画效果就消失了*!*/
            /*display: block;*/
        /*}*/
 .nav>li:hover .sub li{
            transform: none;
 opacity: 1;
 }
        .nav>li:hover .sub li:nth-child(1){
            transition-delay: 0ms;
 }
        .nav>li:hover .sub li:nth-child(2){
            transition-delay: 200ms;
 }
        .nav>li:hover .sub li:nth-child(3){
            transition-delay: 400ms;
 }
        .nav>li:hover .sub li:nth-child(4){
            transition-delay: 600ms;
 }
        .nav>li:hover .sub li:nth-child(5){
            transition-delay: 800ms;
 }
        .nav>li .sub li:nth-child(5){
            transition-delay: 0ms;
 }
        .nav>li .sub li:nth-child(4){
            transition-delay: 200ms;
 }
        .nav>li .sub li:nth-child(3){
            transition-delay: 400ms;
 }
        .nav>li .sub li:nth-child(2){
            transition-delay: 600ms;
 }
        .nav>li .sub li:nth-child(1){
            transition-delay: 800ms;
 }
        div{
            width: 400px;
 height: 300px;
 background-color: red;
 margin: 0 auto;
 }
    </style>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
<div>
 我是文字
</div>
</body>
</html>