css弹窗动画效果，示例弹窗从底部弹出

以下是一个简单的CSS弹窗动画示例，弹窗从屏幕底部向上弹出：

HTML:

<div class="popup">
  <div class="popup-content">
    <span class="close">&times;</span>
    <p>这是一个简单的弹窗！</p>
  </div>
</div>

CSS:

.popup {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: transform 0.3s ease-out;
}
 
.popup-content {
  width: 80%;
  max-width: 400px;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
 
.close {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 25px;
}
 
/* 弹窗打开时的样式 */
.popup.active {
  transform: translateX(-50%) scale(1);
}
 
/* 弹窗关闭时的样式 */
.popup.inactive {
  transform: translateX(-50%) scale(0);
}

JavaScript (用于触发弹窗打开和关闭的动画):

document.querySelector('.close').addEventListener('click', function() {
  var popup = document.querySelector('.popup');
  popup.classList.toggle('active');
  popup.classList.toggle('inactive');
});

这个例子中，弹窗默认是隐藏的，点击关闭按钮会触发动画将弹窗缩小并隐藏。这个例子演示了如何使用CSS的transform和transition属性来创建弹窗的动画效果。