<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3移动应用导航菜单动画效果</title>
<style>
body,
html {
margin: 0;
padding: 0;
}
body {
background: #f8f7f5;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #888888;
}
#mobile {
height: 667px;
width: 375px;
background: #c6c4c1;
position: relative;
margin: 30px auto;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-khtml-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
#mobileBodyContent {
background: #f8f7f5;
position: relative;
z-index: 20;
width: 100%;
height: 100%;
overflow: hidden;
visibility: visible;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#header {
height: 60px;
background: #eae8e5;
}
#image {
height: 280px;
width: 100%;
overflow: hidden;
position: relative;
}
#image img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#title {
height: 20px;
width: 200px;
margin: 40px auto;
background: #eae8e5;
}
#text .item {
height: 10px;
width: calc(100% - 40px);
margin: 20px auto;
background: #eae8e5;
}
#burgerBtn {
border-top: 2px solid #f85051;
height: 25px;
width: 30px;
box-sizing: border-box;
position: absolute;
z-index: 30;
left: 20px;
top: 15px;
cursor: pointer;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#burgerBtn:before {
content: "";
display: block;
position: absolute;
height: 2px;
width: 30px;
left: 0;
background: #f85051;
top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#burgerBtn:after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 30px;
left: 0;
background: #f85051;
bottom: 0;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#nav {
position: absolute;
z-index: 10;
list-style-type: none;
margin: 100px 0 0 20px;
padding: 0;
overflow: hidden;
}
#nav li {
height: 30px;
width: 0;
margin: 30px 0;
background: #eae8e5;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-khtml-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
#nav li + li {
margin-left: -40px;
}
#nav li + li + li {
margin-left: -80px;
}
#nav li + li + li + li {
margin-left: -120px;
}
#demoSelector {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
top: 333px;
left: 50%;
margin-left: 227px;
}
#demoSelector li {
padding: 10px 0 10px 30px;
position: relative;
cursor: pointer;
}
#demoSelector li:after {
content: "";
position: absolute;
height: 10px;
width: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #d8d5d0;
left: 0;
top: 18px;
}
#demoSelector li:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
border: 2px solid #888888;
left: -6px;
top: 12px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-khtml-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#demoSelector li.active:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-khtml-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.navigation #nav li {
width: 200px;
margin-left: 0;
}
.navigation #burgerBtn {
border-color: transparent;
}
.navigation #burgerBtn:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-khtml-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 33px;
left: -2px;
}
.navigation #burgerBtn:after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-khtml-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
bottom: 11px;
width: 33px;
left: -2px;
}
.demo1.navigation #mobileBodyContent {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-khtml-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);
margin-left: 260px;
}
.demo2.navigation #mobileBodyContent {
margin-left: 320px;
-webkit-opacity: 0.4;
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
-o-opacity: 0.4;
opacity: 0.4;
}
.demo3.navigation #mobileBodyContent {
-webkit-opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
-o-opacity: 0;
opacity: 0;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-khtml-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);
visibility: hidden;
}
</style>
</head>
<body>
<div id="mobile" class="demo1">
<div id="burgerBtn"></div>
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="mobileBodyContent">
<div id="header"></div>
<div id="image">
<img src="images/normal1.jpg" alt="" />
</div>
<div id="title"></div>
<div id="text">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
<ul id="demoSelector">
<li id="demo1" class="active">Démo 1</li>
<li id="demo2">Démo 2</li>
<li id="demo3">Démo 3</li>
</ul>
<script>
var burgerBtn = document.getElementById('burgerBtn');
var mobile = document.getElementById('mobile');
var demo1 = document.getElementById('demo1');
var demo2 = document.getElementById('demo2');
var demo3 = document.getElementById('demo3');
burgerBtn.addEventListener('click', function() {
mobile.classList.toggle('navigation');
}, false);
demo1.addEventListener('click', function() {
demo1.classList.add('active');
demo2.classList.remove('active');
demo3.classList.remove('active');
mobile.classList.add('demo1');
mobile.classList.remove('demo2', 'demo3', 'navigati
