HTML
<div class="button_a">
<span></span>
</div>
<div class="xianlop_p">
<span></span>
</div>
<div class="kpomk_lo cdaki">
<div class="taunj_pokl">
</div>
</div>
CSS3
*{ margin:0; padding:0;}
html,body{ height:100%;}
.button_a{ height:50px; line-height:50px; width:100%; border-top:1px solid #ccc; position:fixed; bottom:0px; text-align:center; background:#fff; z-index:1;}
.button_a span{ width:35px; height:35px; background:#3e7edb; display: inline-block; vertical-align:middle;}
.kpomk_lo{ background:#f1f1f1; height:100%; display:none; position:relative;}
.xianlop_p{ height:50px; line-height:50px; width:100%; border-top:1px solid #ccc; position:fixed; bottom:0px; text-align:center; display:none; background:#f2f2f2; z-index:2;}
.xianlop_p.nav_gd_pop1 span{ width:35px; height:35px; background:#3e7edb; display: inline-block; vertical-align:middle;}
.xianlop_p span{
animation: moveb 0.5s 1 ease-in-out forwards;
-webkit-animation: moveb 0.5s 1 ease-in-out forwards;
-moz-animation: moveb 0.5s 1 ease-in-out forwards;
-ms-animation: moveb 0.5s 1 ease-in-out forwards;
-o-animation: moveb 0.5s 1 ease-in-out forwards;
}
@keyframes moveb {
from{
transform: rotate(0deg);
}
to{
transform: rotate(45deg);
}
}
@-webkit-keyframes moveb{
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(45deg);
}
}
@-moz-keyframes moveb{
from{
-moz-transform: rotate(0deg);
}
to{
-moz-transform: rotate(45deg);
}
}
.taunj_pokl{ position:absolute; width:100%; z-index:-0; height:100%; background:red;
-webkit-transform:translate(0,200%);
-moz-transform:translate(0,200%);
transform:translate(0,200%);
}
.cdaki .taunj_pokl{
animation:tanchuyy 0.5s 1 ease-in-out forwards ;
-webkit-animation:tanchuyy 0.3s 1 ease-out forwards;
-moz-animation:tanchuyy 0.3s 1 ease-out forwards;
-ms-animation:tanchuyy 0.3s 1 ease-out forwards;
-o-animation:tanchuyy 0.3s 1 ease-out forwards;
}
@keyframes tanchuyy {
from{
transform:translate(0,100%);
}
25%{
transform:translate(0,55%);
}
50%{
transform:translate(0,25%);
}
75%{
transform:translate(0,-2%);
}
to{
transform:translate(0,0%);
}
}
@-webkit-keyframes tanchuyy{
from{
-webkit-transform:translate(0,100%);
}
25%{
-webkit-transform:translate(0,55%);
}
50%{
-webkit-transform:translate(0,25%);
}
75%{
-webkit-transform:translate(0,-2%);
}
to{
-webkit-transform:translate(0,0%);
}
}
@-moz-keyframes tanchuyy{
from{
-moz-transform:translate(0,100%);
}
25%{
-moz-transform:translate(0,55%);
}
50%{
-moz-transform:translate(0,25%);
}
75%{
-moz-transform:translate(0,-2%);
}
to{
-moz-transform:translate(0,0%);
}
}
JQ
$(function(){
$(".button_a span").click(function(){
$(".xianlop_p").show().addClass('nav_gd_pop1');
$(".kpomk_lo").show()
})
$(".xianlop_p").click(function(){
$(this).hide().removeClass('nav_gd_pop1');
$(".kpomk_lo").hide()
});
})