<!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>
從下往上顯示的彈出框動畫
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。