css 从底部弹出div |饿了么 css

.popup-container {
position: fixed;
bottom: -300px; /* 初始状态隐藏在底部 */
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 200px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: bottom 0.5s ease-in-out;
/* 这里使用了CSS动画 */
}
.popup-container.visible {
bottom: 0; /* 显示在底部 */
}

首先，大家创建了一个名为popup-container的div，将其定位于屏幕底部，并使其初始状态下隐藏在底部。大家还对其进行一些样式化处理，使其看起来漂亮一些。

接下来，在popup-container类名后面使用了.visible类名，这是表示当大家想要显示这个div时，大家将动态地给这个div添加.visible类名。大家在CSS中定义.visible类名，使其bottom属性为0，这将使大家的div显示在底部。

通过将.visible类名与popup-container结合使用，大家可以使该div从底部弹出。大家可以通过JavaScript代码来控制何时向该div添加.visible类名，以便在需要时将其显示。

如果您想了解更多关于CSS动画的知识，可以访问MDN CSS动画。