css动画从下往上打开 |css媒体查询iphonex

首先，在HTML中创建一个容器，并为其添加一个CSS类。在CSS中，将该容器的高度设为0，让其隐藏起来。然后使用absolute和bottom属性将该容器定位在页面底部，从而实现从下往上的打开效果。

<div class="container">
<p>这里是容器内容</p>
</div>

.container {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
transition: height 0.5s;
}

接下来，使用JavaScript为容器添加一个事件监听器。当用户点击打开按钮时，将容器的高度设为100%，从而实现从下往上的打开效果。同样，点击关闭按钮时，将容器的高度设为0，实现从上往下的关闭效果。

<button onclick="openContainer()">打开容器</button>
<button onclick="closeContainer()">关闭容器</button>

function openContainer() {
document.querySelector('.container').style.height = '100%';
}
function closeContainer() {
document.querySelector('.container').style.height = '0';
}

最后，使用CSS调整容器的样式，以便与网页的整体风格相符。例如，添加背景颜色、边框、阴影等等。

.container {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
overflow: hidden;
transition: height 0.5s;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 20px;
box-sizing: border-box;
}

通过简单地添加CSS动画，您可以轻松地为网页添加出色的交互效果，从而提升用户的体验和满意度。