* { padding:0; margin:0 } ul,li { list-style:none } a { text-decoration:none; display:block } .menu>li { float:left; position:relative } .menu li a { width:100px; height:50px; background:#999; color:#fff; text-align:center; line-height:50px } .menu_list { position:absolute; left:0; top:50px; perspective:400px; height:0; } .menu_list li { transform:rotateY(90deg); opacity:0; transition:transform 0.5s,opacity 0.4s } .menu>li:hover .menu_list li { transform:rotateY(0deg); opacity:1 } .menu>li:hover .menu_list li:nth-child(1) { transition-delay:0ms } .menu>li:hover .menu_list li:nth-child(2) { transition-delay:50ms } .menu>li:hover .menu_list li:nth-child(3) { transition-delay:100ms } .menu>li:hover .menu_list li:nth-child(4) { transition-delay:150ms } .menu>li:hover .menu_list li:nth-child(5) { transition-delay:200ms } .menu>li:hover .menu_list li:nth-child(6) { transition-delay:250ms } .menu>li:hover .menu_list li:nth-child(7) { transition-delay:300ms } .menu>li:hover .menu_list li:nth-child(8) { transition-delay:350ms } .menu_list li:nth-child(1) { transition-delay:350ms } .menu_list li:nth-child(2) { transition-delay:300ms } .menu_list li:nth-child(3) { transition-delay:250ms } .menu_list li:nth-child(4) { transition-delay:200ms } .menu_list li:nth-child(5) { transition-delay:150ms } .menu_list li:nth-child(6) { transition-delay:100ms } .menu_list li:nth-child(7) { transition-delay:50ms } .menu_list li:nth-child(8) { transition-delay:0ms } /*height:0; 防止在鼠标移动到下拉列表上显示下拉列表*/ /*perspective:400px; 3D视角*/ /*transition针对transform:rotateY(0deg); opacity:1*/
1.代码精简,没有多余代码,方便学习。
2.难点注释清晰,一点就懂。