<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title></title>
<style>
.winTc1{width:100%;height:0%;bottom:0;left:0;position:fixed;background-color: rgba(0,0,0,0.5);z-index:1000;}
.winTc1 .big1{position:absolute;width:88%;height:60%;padding:2rem 1.8rem 2rem 1.8rem;background:#fff;border-top-left-radius:2rem;border-top-right-radius: 2rem;overflow-y: scroll;}
.winTc1 .big1 .close{width:1.36rem;height:1.36rem;position:fixed;margin-left:25.5rem;margin-top:-0.5rem;}
.winTc1 .big1 .winTxt1 p{color:#666666;font-size:1.04rem;text-align: left;margin-bottom:1.2rem;}
.winTxt1 h2{color:#3c1ba8;font-size:1.44rem;text-align: center;font-weight:normal;}
.winTxt1 div h3{color:#5024dc;font-size:1.28rem;font-weight:normal;margin-bottom:1.6rem;margin-top:2rem;}
.show{animation:myfirst 0.5s;-webkit-animation:myfirst 0.5s;animation-fill-mode: forwards;}
@keyframes myfirst
{
0% {height:0%;}
100% {height:100%;}
}
@-webkit-keyframes myfirst
{
0% {height:0%;}
100% {height:100%;}
}
@-moz-keyframes myfirst
{
0% {height:0%;}
100% {height:100%;}
}
.hideList{bottom:0;}
</style>
<script src="../js/resize.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn">打开</button>
<div class="winTc1" id="getRule">
<div class="big1">
<img class="close" src="../img/close.png"/>
<div class="winTxt1">
<h2>鼓励人心的鸡汤</h2>
<div>
<h3>一</h3>
<p>1.阅读使人充实，会谈使人敏捷，写作使人精确；</p>
<p>2.最大的骄傲于最大的自卑都表示心灵的最软弱无力；</p>
<p>3.自知之明是最难得的知识；</p>
<p>4.勇气通往天堂，怯懦通往地狱；</p>
<p>5.有时候读书是一种巧妙地避开思考的方法。</p>
</div>
<div>
<h3>二</h3>
<p>1.阅读一切好书如同和过去最杰出的人谈话；</p>
<p>2.越是没有本领的就越加自命不凡；</p>
<p>3.越是无能的人，越喜欢挑剔别人的错儿。</p>
<p>4.知人者智，自知者明。胜人者有力，自胜者强。</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#btn").click(function(){
$("#getRule").addClass('show');
$(".big1").addClass('hideList');
})
$(".close").click(function(){
$("#getRule").removeClass('show');
$(".big1").removeClass('hideList');
})
</script>
</body>
</html>
从下往上显示的弹出框动画
猜你喜欢
转载自www.cnblogs.com/lxystar/p/10716120.html
今日推荐
周排行