码迷,mamicode.com
首页 > 其他好文 > 详细

3D效果导航代码

时间:2016-10-14 17:14:03      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
*, *:before, *:after
{ padding: 0; margin: 0; box-sizing: border-box; } .menu { list-style: none; width: 1280px; height: 40px; margin: 50px auto; box-shadow: 0 0 4px rgba(0, 0, 0, .5); } .menu li { float: left; } .menu li a { display: inline-block; color: #666; background-color: #eee; text-decoration: none; position: relative; } .menu li a::before { content: attr(title); color: #888; background-color: #aaa; position: absolute; left: 0; top: 0; -moz-transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); } .menu li a::after { content: attr(title); color: #fff; background-color: #666; position: absolute; left: 0; top: 0; -moz-transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg); } .menu li a, .menu li a::before, .menu li a::after { width: 120px; height: 40px; text-align: center; font-size: 14px; line-height: 40px; border: 1px solid #ddd; border-width: 0 1px 0 0; transition: all 1s; -moz-transform-style: preserve-3d; -moz-transform-origin: center center -20px; -webkit-transform-style: preserve-3d; -webkit-transform-origin: center center -20px; } .menu li:hover a, .menu li a.cur { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); } @media (max-width: 1980px) { .menu { width:80%; height: 40px; } .menu li { width: 12.5%; } .menu li a, .menu li a::before, .menu li a::after { width: 100%; } } @media (max-width: 768px) { .menu { width: 100%; height: 80px; } .menu li { width: 25%; } .menu li a, .menu li a::before, .menu li a::after { width: 100%; border-width: 0 1px 1px 0; } } @media (max-width: 480px) { .menu { width: 100%; height: 160px; } .menu li { width: 50%; } .menu li a, .menu li a::before, .menu li a::after { width: 100%; border-width: 0 1px 1px 0; } } @media (max-width: 320px) { .menu { width: 100%; height: 320px; } .menu li { width: 100%; } .menu li a, .menu li a::before, .menu li a::after { width: 100%; border-width: 0 0 1px 0; } } a{font-size:48px;}
<ul class="menu">  
    <li><a title="网站首页" href="#" class="cur" >网站首页</a>  
    </li>  
    <li><a title="行业洞察" href="#">行业洞察</a>  
    </li>  
    <li><a title="解决方案" href="#">解决方案</a>  
    </li>  
    <li><a title="产品商场" href="#">产品商场</a>  
    </li>  
    <li><a title="技术支持" href="#">技术支持</a>  
    </li>  
    <li><a title="媒体中心" href="#">媒体中心</a>  
    </li>  
    <li><a title="加入我们" href="#">加入我们</a>  
    </li>  
    <li><a title="关于我们" href="#">关于我们</a>
  </li></ul>

 

3D效果导航代码

标签:

原文地址:http://www.cnblogs.com/shark1100913/p/5960717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!