css3_jq仿新浪home仿app

最新推荐文章于 2024-07-08 17:02:45 发布

深沉的简单

最新推荐文章于 2024-07-08 17:02:45 发布

阅读量560

点赞数 1

分类专栏： css3 文章标签： css3_jq仿新浪home仿app jQuery css3 h5 webapp

本文链接：https://blog.csdn.net/u013861109/article/details/52414261

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>css3_jq仿新浪home</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style>
*{ 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%);
}
}

</style>

</head>

<body>
<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>

</body>
<script>
$(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()
   });


})
</script>
</html>