模仿大疆官网效果图：
点击前
点击后：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0rpx;
padding: 0rpx;
font-family: "Microsoft YaHei";
font-size: 16px;
}
a{
text-decoration: none;
}
.left{
float: left;
}
.right{
float: right;
}
.clear{
clear: both;
}
.mHeader{
position: fixed;
height: 50px;
z-index: 100;
width: 100%;
background: black;
top: 0px;
left: 0px;
}
.mIcon{
width: 50px;
height: 50px;
padding: 3px 10px;
position: fixed;
z-index: 100;
}
.controlIcon{
display: block;
width: 35px;
height: 3px;
margin-top: 8px;
margin-bottom: 8px;
transition: all .4s ease;
background: #dde1e4;
}
.mIconActive .controlIcon:nth-child(1){
animation: 0.5s ease-out forwards animate1;
-webkit-animation: 0.5s ease-out forwards animate1;
}
.mIconActive .controlIcon:nth-child(2){
opacity: 0;
}
.mIconActive .controlIcon:nth-child(3){
animation: 0.5s ease-out forwards animate2;
-webkit-animation: 0.5s ease-out forwards animate2;
}
.mIconClose .controlIcon:nth-child(1){
animation: 0.5s ease-out forwards animate3;
-webkit-animation: 0.5s ease-out forwards animate3;
}
.mIconClose .controlIcon:nth-child(2){
opacity: 1;
}
.mIconClose .controlIcon:nth-child(3){
animation: 0.5s ease-out forwards animate4;
-webkit-animation: 0.5s ease-out forwards animate4;
}
@-webkit-keyframes animate1{
0%{
-webkit-transform:rotate(0deg) translateY(0px);
}
100%{
-webkit-transform:rotate(45deg) translateY(8px) translateX(8px);
}
}
@keyframes animate1{
0%{
transform:rotate(0deg) translateY(0px);
}
100%{
transform:rotate(45deg) translateY(8px) translateX(8px);
}
}
@-webkit-keyframes animate2{
0%{
-webkit-transform:rotate(0deg) translateY(0px);
}
100%{
-webkit-transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
}
@keyframes animate2{
0%{
transform:rotate(0deg) translateY(0px);
}
100%{
transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
}
@-webkit-keyframes animate3{
0%{
-webkit-transform:rotate(45deg) translateY(8px) translateX(8px);
}
100%{
-webkit-transform:rotate(0deg) translateY(0px);
}
}
@keyframes animate3{
0%{
transform:rotate(45deg) translateY(8px) translateX(8px);
}
100%{
transform:rotate(0deg) translateY(0px);
}
}
@-webkit-keyframes animate4{
0%{
-webkit-transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
100%{
-webkit-transform:rotate(0deg) translateY(0px);
}
}
@keyframes animate4{
0%{
transform:rotate(-45deg) translateY(-8px) translateX(8px);
}
100%{
transform:rotate(0deg) translateY(0px);
}
}
.mLogo{
width: 104px;
height: 26px;
margin: 10px auto;
position: relative;
z-index: 10;
}
.mLogo img{
width: 104px;
height: 26px;
}
.mMenu{
position: fixed;
top: 0px;
padding-top: 50px;
background: black;
z-index: 9;
width: 100%;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.mMenu ul{
padding-left: 0px;
}
.mMenu ul li a{
display: block;
height: 50px;
line-height: 50px;
color: #dde1e4;
text-decoration: none;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="mHeader hidden-lg hidden-md">
<div class="mIcon left">
<span class="controlIcon"></span>
<span class="controlIcon"></span>
<span class="controlIcon"></span>
</div>
<div class="mLogo">
<a href="index.html"><img src="images/bottomlogo.png" /></a>
</div>
<div class="mMenu clear">
<ul>
<li><a href="aboutus.html">公司简介</a></li>
<li><a href="product.html">产品介绍</a></li>
<li><a href="case.html">客户案例</a></li>
<li><a href="team.html">团队介绍</a></li>
<li><a href="newsList.html">新闻中心</a></li>
<li><a href="contactus.html">联系我们</a></li>
<li><a href="recruit.html">招募精英</a></li>
</ul>
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//移动端菜单
$(".mMenu").hide();
$(".mIcon").click(function(){
if($(this).hasClass("mIconActive")){
$(this).removeClass("mIconActive").addClass("mIconClose");
$(".mMenu").show().slideUp();
}else{
$(this).removeClass("mIconClose").addClass("mIconActive");
$(".mMenu").hide().slideDown();
}
});
</script>
</html>