Imitation of DJI official website renderings:
before click
After clicking:
<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>