<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
width: 100vw;
height: 100vh;
margin: 0;
box-sizing: border-box;
}
.container {
width: 400px;
background-color: antiquewhite;
height: 300px;
/* 不改变位置隐藏 */
display: none;
visibility: hidden;
opacity: 0;
filter: opacity(0%);
width: 0;
transform: scale(0);
/* 添加伪元素 */
/* 移动到视野外 */
margin-left: -100px;
transform: translateX(-100%);
position: relative;
top: -100%;
}
.hidden {
position: relative;
}
.hidden::after {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: white;
}
</style>
</head>
<body>
<div class="container hidden">Hello I'm container</div>
</body>
</html>
