优美的移动端菜单特效

桃扇骨 2022-05-27 06:38 125阅读 0赞

模仿大疆官网效果图：

点击前

![70][]

点击后：

![70 1][]

<!DOCTYPE html>  
<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>

[70]: /images/20220527/c238aa80ebd4441ba2ddf08e30476acb.png
[70 1]: /images/20220527/5d2ca536fa054b1cae1f643731977da6.png