<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="nim.css" rel="stylesheet"> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} .box{position: fixed;width:50px;height:130px;background:#6f6e6d;transition:all 1s ease 0s;} span{color:#fff;font-size: 26px;width: 20px;height: 20px;display:block;} .box:hover{width:200px;height:100%;} .box_m{position:absolute; top: 20px;left:50%;margin-left: -10px;opacity:1;} .box_e{position:absolute; top: 40px;left:50%;margin-left: -10px;opacity:1;} .box_n{position:absolute; top: 60px;left:50%;margin-left: -10px;opacity:1;} .box_u{position:absolute; top: 80px;left:50%;margin-left: -10px;opacity:1;} .box:hover .box_m{animation:box_m 0.6s ease 0s normal;animation-fill-mode:forwards;} @keyframes box_m{ 0%{top: 20px;right:50%;opacity:1;} 50% { top: 10px; left:46px; opacity: 1;} 100% { top: 10px; left:50px; opacity: 0;} } .box:hover .box_e{animation:box_e 0.6s ease 0s normal;animation-fill-mode:forwards;} @keyframes box_e{ 0%{top: 30px;left:50%;opacity:1;} 50%{top: 10px;left:70px;opacity:1;} 100%{top: 10px;left:70px;opacity:0;} } .box:hover .box_n{animation:box_n 0.6s ease 0s normal;animation-fill-mode:forwards;} @keyframes box_n{ 0%{top: 40px;left:50%;opacity:1;} 50%{top: 10px;left:100px;opacity:1;} 100%{top: 10px;left:106px;opacity:0;} } .box:hover .box_u{animation:box_u 0.6s ease 0s normal;animation-fill-mode:forwards;} @keyframes box_u{ 0%{top: 50px;left:50%;opacity:1;} 50%{top: 10px;left:125px;opacity:1;} 100%{top: 10px;left:130px;opacity:0;} } .box_img{ background: url("photo.png") 0 -120px no-repeat; width:166px; height: 21px; position: absolute; left:10px; top: 20px; opacity: 0; } .box:hover .box_img{animation:box_img 6s ease 0s normal;animation-fill-mode:forwards;} @keyframes box_img{ 0%{opacity: 0;} 100%{opacity: 1;} } .UL{opacity: 0;margin-top: 100px;} .UL ul li{height: 50px;line-height: 45px;text-align: center;color: #fff;font-size: 14px;} .UL li:hover{background: #fff;color: #333;} .box:hover .UL{animation:UL 0.5s ease;animation-fill-mode:forwards;opacity: 0;} @keyframes UL{ 0%{opacity: 0;} 100%{opacity: 1;} } .Hidden{visibility: hidden;opacity: 0;width: 260px;height: 100%;position: fixed;left:200px;top:0;background: #333;transition:all 0.6s ease;} .UL li:hover .Hidden{opacity: 1;visibility: visible;} .box li:hover .Hidden_SPAN{top:5%;} .box .Hidden .span1{background:url("photo.png") 15px -542px no-repeat;background-size:1200px;} .box .Hidden .span2{background:url("photo.png") 15px -170px no-repeat;background-size:1200px;} .box .Hidden .span3{background:url("photo.png") 15px -456px no-repeat;background-size:1200px;} .box .Hidden .span4{background:url("photo.png") 15px -356px no-repeat;background-size:1200px;} .box .Hidden .span5{background:url("photo.png") 15px -262px no-repeat;background-size:1200px;} .box .Hidden .span1:hover{background:#000 url("photo.png") 15px -542px no-repeat;background-size:1200px;} .box .Hidden .span2:hover{background:#000 url("photo.png") 15px -170px no-repeat;background-size:1200px;} .box .Hidden .span3:hover{background:#000 url("photo.png") 15px -456px no-repeat;background-size:1200px;} .box .Hidden .span4:hover{background:#000 url("photo.png") 15px -356px no-repeat;background-size:1200px;} .box .Hidden .span5:hover{background:#000 url("photo.png") 15px -262px no-repeat;background-size:1200px;} .Hidden_SPAN{position: absolute;width: 250px;left:0;top:50px;transition:all 0.5s ease;} .box .Hidden span{display: block;height: 100px;border-bottom:1px #ccc solid;width:260px;background:#333;position: relative;} .box .Hidden span .A_1{text-decoration:none;color:#ccc;font-size:14px;position: absolute;top:30px; right:18px;} .Hidden .Hidden_SPAN span:hover .A_1{animation:linka 0.3s ease;color: #fff; animation-fill-mode:forwards;} @keyframes linka{ 0% {top:30px; right:18px;} 25% {top:30; right:22px; } 75% {top:30; right:25px;} 100% {top:30px; right:18px;} } .Hidden_SPAN_2{position: absolute;width: 250px;left:0;top:209px;transition:all 0.5s ease;} .box .Hidden .Hidden_SPAN_2 .span_1{height: 40px;border-bottom:1px #ccc solid;width:260px;position: relative;} .Hidden .Hidden_SPAN_2 .span_1 .A_2{text-decoration:none;font-size:12px;color:#fff;position: absolute;top:0;right:104px;} .box .Hidden .Hidden_SPAN_2 .span_1:hover{background:#000;} .Hidden .Hidden_SPAN_2 .span_1:hover .A_2{animation:NIM 0.3s ease; animation-fill-mode:forwards;} @keyframes NIM{ 0% {top:0;right:104px;} 25% {top:0; right:108px; } 75% {top:0; right:111px;} 100% {top:0px; right:104px;} } .Hidden_SPAN_3{position: absolute;width: 250px;left:0;top:259px;transition:all 0.5s ease;} .box .Hidden .Hidden_SPAN_3 .span_2{height: 40px;border-bottom:1px #ccc solid;width:260px;position: relative;} .Hidden .Hidden_SPAN_3 .span_2 .A_3{text-decoration:none;font-size:12px;color:#fff;position: absolute;top:0;right:104px;} .box .Hidden .Hidden_SPAN_3 .span_2:hover{background:#000;} .Hidden .Hidden_SPAN_3 .span_2:hover .A_3{animation:NIM 0.3s ease; animation-fill-mode:forwards;} @keyframes NIM{ 0% {top:0;right:104px;} 25% {top:0; right:108px; } 75% {top:0; right:111px;} 100% {top:0px; right:104px;} } .Hidden_SPAN_4{position: absolute;width: 250px;left:0;top:309px;transition:all 0.5s ease;} .box .Hidden .Hidden_SPAN_4 .span_3{height: 40px;border-bottom:1px #ccc solid;width:260px;position: relative;} .Hidden .Hidden_SPAN_4 .span_3 .A_4{text-decoration:none;font-size:12px;color:#fff;position: absolute;top:0;right:104px;} .box .Hidden .Hidden_SPAN_4 .span_3:hover{background:#000;} .Hidden .Hidden_SPAN_4 .span_3:hover .A_4{animation:NIM 0.3s ease; animation-fill-mode:forwards;} @keyframes NIM{ 0% {top:0;right:104px;} 25% {top:0; right:108px; } 75% {top:0; right:111px;} 100% {top:0px; right:104px;} } .Hidden_SPAN_5{position: absolute;width: 250px;left:0;top:359px;transition:all 0.5s ease;} .box .Hidden .Hidden_SPAN_5 .span_4{height: 40px;border-bottom:1px #ccc solid;width:260px;position: relative;} .Hidden .Hidden_SPAN_5 .span_4 .A_5{text-decoration:none;font-size:12px;color:#fff;position: absolute;top:0;right:104px;} .box .Hidden .Hidden_SPAN_5 .span_4:hover{background:#000;} .Hidden .Hidden_SPAN_5 .span_4:hover .A_5{animation:NIM 0.3s ease; animation-fill-mode:forwards;} @keyframes NIM{ 0% {top:0;right:104px;} 25% {top:0; right:108px; } 75% {top:0; right:111px;} 100% {top:0px; right:104px;} } </style> </head> <body> <div class="box"> <div class="boxlm"> <span class="box_m">M</span> <span class="box_e">E</span> <span class="box_n">N</span> <span class="box_u">U</span> <div class="box_img"></div> </div> <div class="UL"> <ul> <li> 力帆首页 </li> <li> 车型展示 <div class="Hidden"> <div class="Hidden_SPAN"> <span class="span1"><a href="#" class="A_1">迈威</a></span> <span class="span2"><a href="#" class="A_1">力帆820</a></span> <span class="span3"><a href="#" class="A_1">乐余</a></span> <span class="span4"><a href="#" class="A_1">力帆X60</a></span> <span class="span5"><a href="#" class="A_1">力帆X50</a></span> </div> </div> </li> <li> 品牌专区 <div class="Hidden"> <div class="Hidden_SPAN_2"> <span class="span_1"><a href="#" class="A_2">公司简介</a></span> <span class="span_1"><a href="#" class="A_2">品牌历史</a></span> <span class="span_1"><a href="#" class="A_2">科技创新</a></span> </div> </div> </li> <li> 资讯中心 <div class="Hidden"> <div class="Hidden_SPAN_3"> <span class="span_2"><a href="#" class="A_3">资讯动态</a></span> <span class="span_2"><a href="#" class="A_3">活动专区</a></span> </div> </div> </li> <li> 服务指南 <div class="Hidden"> <div class="Hidden_SPAN_4"> <span class="span_3"><a href="#" class="A_4">经商销查询</a></span> <span class="span_3"><a href="#" class="A_4">服务商查询</a></span> <span class="span_3"><a href="#" class="A_4">预约试驾</a></span> </div> </div> </li> <li> 车主专项 <div class="Hidden"> <div class="Hidden_SPAN_5"> <span class="span_4"><a href="#" class="A_5">交流专区</a></span> <span class="span_4"><a href="#" class="A_5">下载专区</a></span> </div> </div> </li> <li> 联系力帆 </li> </ul> </div> </div> </body> </html>
原文：http://www.cnblogs.com/dexin/p/6308638.html