图片演示:
鼠标放到一级菜单栏时,二级菜单则会淡出并且从上至下依次反转。鼠标一离开则二级菜单会淡入,并且也会反转。
代码演示:
<!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>