模仿大疆官网效果图：
点击前
点击后：
<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元/天 解锁文章
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
