撰写一个盒子弹窗从底部弹出的动画

创建一个盒子从底部弹出的动画，通常涉及CSS和JavaScript的配合。下面是一个简单的步骤和示例代码：

1. HTML结构:

<button id="popupButton">点击显示弹窗</button>
<div id="popup" class="hidden">
  <p>这是一个底部弹出的盒子</p>
</div>

2. CSS样式:

.hidden {
  display: none;
  position: absolute; /* 设置绝对定位 */
  bottom: -100px; /* 初始位置在屏幕下方 */
  width: 300px; /* 自定义宽度 */
  height: auto; /* 高度自适应内容 */
  transition: all 0.5s ease; /* 添加过渡效果 */
}

.show {
  display: block;
  bottom: 0; /* 弹出后到屏幕底部 */
}

3. JavaScript脚本 (jQuery为例):

document.getElementById('popupButton').addEventListener('click', function() {
  document.getElementById('popup').classList.toggle('show');
});

当你点击按钮时，`toggle`方法会切换`.hidden`和`.show`类，触发CSS中设置好的过渡动画效果。