CSS3动画制作下拉导航

最新推荐文章于 2024-08-09 17:44:17 发布

转载最新推荐文章于 2024-08-09 17:44:17 发布 · 87 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhp404/articles/4308504.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>制作3D旋转导航</title>
   <style>
   *{margin:0;padding:0;}
   ul{list-style:none;}
   .clearfix{zoom:1;}
   .clearfix:after{content:'\20';display:block;height:0;clear:both;}

   .nav{
       width:950px;
       margin:50px auto 0;
       background:#74ADAA;
   }
   .nav >li{
       float:left;
       position:relative;
   }
   .nav li a{
       display:block;
       padding:15px 30px;
       color:#fff;
       line-height:20px;
       font-size:20px;
       border-right:1px solid #fff;
       text-decoration:none;

       text-transform:capitalize;
   }
   .nav li:last-child a{
       border-right:0;
   }

   .contact{
       position:absolute;
       top:50px;
       left:0;
       color:#fff;
       width:200px;
       background:#74ADAA;

       transform-origin: 0px 0px;
       transform:rotatex(-90deg);
       transition:all 0.3s ease-in;
   }

   .nav li:hover .contact{
       transform:rotatex(0deg);
   }

   .contact li{position:relative;}
   .contact li .cot2 {
       position:absolute;
       left:200px;
       top:0;
       background:#f00;
       width:200px;
       transform:rotatex(-90deg);
       transition:all .3s ease;
       transform-origin:0 0;
   }
   .contact li:hover .cot2{
       transform:rotatex(0deg);
   }
   </style>
</head>

<body>
<ul class="nav clearfix">
   <li><a href="#">home</a></li>
   <li><a href="#">html5</a></li>
   <li>
       <a href="#">css3</a>
       <ul class="contact">
           <li>
               <a href="#">list1</a>
           </li>
           <li>
               <a href="#">list2</a>
               <ul class="cot2">
                   <li>
                       <a href="#">list2</a>
                   </li>
                   <li>
                       <a href="#">list2</a>
                   </li>
               </ul>
           </li>
       </ul>
   </li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/zhp404/articles/4308504.html