微信朋友圈评论（css+js）或者div的从上往下动画和从下往上动画

洪七公 · 发表于 2023-6-1 21:18:48

直接上代码：

<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="review">
<div class="reviewName">
<span>用户名字NAME</span>: 园区信息占位符信息占位符信息占信息占位符信息占位符信息
</div>
</div>
<div class="deletePopup" id="maskID" style="display: none;">
<div class="bottomTwo animetion" id="popDivID">
<div class="delect">删除</div>
<div class="callLine"></div>
<div class="cancel" id="cancelID">取消</div>
</div>
</div>
<style>
.deletePopup {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99999999888;
background-color: rgba(0, 0, 0, .5);
}
.bottomTwo {
background-color: #FFFFFF;
position: absolute;
bottom: 0;
width: 100%;
height: 1rem;
border-radius: 0.15rem .15rem 0 0;
}
.animetion {
animation: animate .5s;
overflow: hidden;
}
.delect {
width: 100%;
padding: .1rem;
text-align: center;
color: red;
font-size: .16rem;
}
.callLine {
width: 100%;
height: .08rem;
background-color: #F5F6F7;
}
.cancel {
width: 100%;
padding: .1rem;
text-align: center;
color: #000;
font-size: .16rem;
}
@keyframes animate {
from {
height: 0px;
top: 100vh;
}
to {
height: 100vh;
top: 85vh;
}
}
.reviewName {
padding: 0.08rem;
font-size: 0.1rem;
font-family: Source Han Sans CN;
font-weight: 400;
color: #282828;
}
.reviewName span {
color: #CB6461;
}
</style>
<script>
//打开窗口
$(".reviewName").click(function (e) {
$("#maskID").show();
$(".bottomTwo").show();
});
//关闭窗口
$('#cancelID').on('click', function (e) {
$(".bottomTwo").slideUp("slow", function () {
$(".deletePopup").hide();
});
})
//h5适配
function recalc() {
var h = document.getElementById('html');
var w = document.documentElement.clientWidth;
// d代表设计宽度
var d = 375;
if (w >= 769) {
h.style.fontSize = '240px';
} else {
h.style.fontSize = w / d * 100 + 'px';
}
}
window.addEventListener("resize", recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</body>
</html>

复制代码

看下效果：

		自动登录	找回密码
密码			会员注册

[CSS/Html] 微信朋友圈评论（css+js）或者div的从上往下动画和从下往上动画