实现3D旋转下拉菜单

来源：互联网发布：长沙软件培训机构编辑：程序博客网时间：2024/06/16 10:28
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;text-decoration:none;}#containter{margin: 20px;height: 100%;width: 100%;text-align: center;}.menu{height: 30px;}.menu li{list-style-type:none;}.menu > li {float: left;width: 80px;height: 30px;background: #CCCCCC;line-height: 30px;}.submenu{position: absolute;perspective:400px;  /*显示3D距离效果*/}.submenu li{opacity: 0;transform: rotateY(90deg);  /*旋转90度*/transition: opacity .4s, transform .5s;   /*旋转时间*/background: #CCCCCC;}.submenu>li{padding: 5px;}.menu li:hover .submenu>li{opacity: 1;z-index: 10;display: block;transform: none;}/*实现层次感*/.menu li:hover .submenu li:nth-child(1){ transition-delay: 0s;}.menu li:hover .submenu li:nth-child(2){transition-delay: 50ms;}.menu li:hover .submenu li:nth-child(3){transition-delay: 100ms;}.menu li:hover .submenu li:nth-child(4){transition-delay: 150ms;}.menu li:hover .submenu li:nth-child(5){transition-delay: 200ms;}.submenu li:nth-child(1) {transition-delay: 200ms;}.submenu li:nth-child(2) {transition-delay: 150ms;}.submenu li:nth-child(3) {transition-delay: 100ms;}.submenu li:nth-child(4) {transition-delay: 50ms;}.submenu li:nth-child(5) {transition-delay: 0s;}</style></head><body><div id="containter"><ul class="menu"><li><a href="" class="navlist">123</a><ul class="submenu"><li><a href="">子菜单1</a></li><li><a href="">子菜单2</a></li><li><a href="">子菜单3</a></li><li><a href="">子菜单4</a></li><li><a href="">子菜单5</a></li></ul></li><li><a href="" class="navlist">456</a></li><li><a href="" class="navlist">789</a></li><li><a href="" class="navlist">999</a></li></ul>   </div></body></html>
0 0