* { padding:0; margin:0; } ul,li,ol { list-style:none; } .tab1 { width:500px; height:50px; margin:30px auto 0; } .tab1 li { width:100px; height:50px; float:left; position:relative; transition:all 0.5s ease; transform-style:preserve-3d; } .tab1 li a { width:100px; height:50px; line-height:50px; text-align:center; display:block; color:#fff; text-decoration:none; position:absolute; top:0; left:0; } .tab1 li a:nth-child(1) { background:brown; transform:translateZ(25px); } .tab1 li a:nth-child(2) { background:darkkhaki; transform:rotateX(90deg) translateZ(25px); } .tab1 li:hover { transform:translateZ(0px) rotateX(-90deg); } .top { width:600px; height:50px; background:#808000; display:flex; margin:15px auto 0; } .top>li { width:120px; height:50px; text-align:center; line-height:50px; } .top>li>a { color:#fff; font-size:18px; text-decoration:none; } .topChild { transition:all .5s; transform:rotateX(-90deg); transform-origin:left top; opacity:0; } .topChild li { width:100%; background:rgba(0,233,40,0.5); color:#fff; cursor:pointer; } .top li:hover .topChild { transform:rotateX(0deg); opacity:1; } .topChild li:hover { background:#A52A2A; }
更新时间:2020-08-14 01:28:41
css3二级导航栏