css上拉弹窗动画

CSS上拉弹窗动画是一种常见的网页交互效果，当用户点击某个按钮或链接时，会弹出一个窗口，让用户进行操作。这种效果可以增强页面的互动性，提高用户体验。下面是一段CSS代码，可以实现一个简单的CSS上拉弹窗动画：

.popup-box {
  position: fixed;
  left: 0;
  bottom: -400px;
  width: 100%;
  height: 400px;
  background: #fff;
  z-index: 999;
  transition: bottom 0.4s ease;
}

.popup-box.active {
  bottom: 0;
} 

在这段代码中，首先定义了一个.popup-box类，它表示弹窗的样式。其中，position属性设置为fixed，使得弹窗在网页中固定位置，不随滚动而移动。left属性设置为0，表示弹窗位于网页的左侧。bottom属性设置为-400px，表示弹窗在默认状态下是隐藏的，位于网页底部以下。width属性设置为100%，使得弹窗的宽度与网页一致。height属性设置为400px，表示弹窗的高度。background属性设置为#fff，表示弹窗的背景颜色为白色。z-index属性设置为999，表示弹窗的图层深度，使得弹窗始终处于所有网页内容的最上层。

接下来，使用transition属性定义动画效果。这里使用了bottom属性，表示弹窗在底部位置和0位置之间进行移动。动画持续时间为0.4秒，缓动函数为ease。

最后，使用.active类表示弹窗的激活状态。当用户点击按钮或链接时，可以通过JavaScript动态添加.active类，使得弹窗显示在网页上，并播放弹窗上拉的动画效果。