优美的移动端菜单特效

最新推荐文章于 2025-02-23 11:08:19 发布

一天一天积累

最新推荐文章于 2025-02-23 11:08:19 发布

阅读量3.9k

点赞数

分类专栏： css样式文章标签：移动端菜单

本文链接：https://blog.youkuaiyun.com/u012011360/article/details/79925563

版权

这篇博客主要介绍了如何在移动端实现优雅的菜单特效，参照了大疆官网的设计，详细讲解了菜单在点击前后的变化效果及其实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿大疆官网效果图：

点击前

点击后：

<!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 .controlIco

最低0.47元/天解锁文章