答案：使用CSS opacity和transform结合transition实现弹窗动画，通过添加.show类触发渐显、缩放或滑入效果，用JavaScript控制类的切换以显示或隐藏弹窗，避免操作display属性，提升动画性能。
要使用 CSS 制作一个带有平滑动画效果的提示弹窗，核心是利用 opacity 控制透明度，结合 transform 实现位移或缩放，再通过 transition 实现过渡动画。这种方式性能好，不会触发重排。
先定义弹窗的基本 HTML 结构：
这是一个提示弹窗！
设置初始样式，让弹窗默认不可见：
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0; /* 初始完全透明 */
pointer-events: none; /* 不响应点击事件 */
transition: opacity 0.3s ease;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: scale(0.9); / 初始缩小 /
transition: transform 0.3s ease;
}
添加一个 .show 类来触发动画：
.modal-overlay.show {
opacity: 1;
pointer-events: auto;
}
.modal-overlay.show .modal-content {
transform: scale(1); / 放大到正常尺寸 /
}
当元素被添加 show 类时，opacity 从 0 到 1，transform 从缩小变为正常，形成渐显+放大出现的效果。
用简单的 JS 控制类的添加和移除：
function showModal() {
document.getElementById('modal').classList.add('show');
}
function closeModal() {
document.getElementById('modal').classList.remove('show');
}
// 示例：页面加载后 1 秒自动弹出
setTimeout(showModal, 1000);
点击遮罩层也可关闭：
document.getElementById('modal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
如果想让弹窗从上方滑入，可以改用 translateY：
.modal-content { transform: translateY(-20px) scale(0.9); transition: transform 0.3s ease, opacity 0.3s ease; }
.modal-overlay.show .modal-content { transform: translateY(0) scale(1); }
这样在出现时会有一个“从上落下 + 放大 + 渐显”的复合动画，视觉更自然。
基本上就这些。关键是利用 opacity 和 transform 的可动画特性，配合 transition 平滑过渡，避免直接操作 display 属性。通过切换类来触发变化，既简洁又高效。不复杂但容易忽略细节。
服务热线
ent {
transform: translateY(-20px) scale(0.9);
transition: transform 0.3s ease, opacity 0.3s ease;
}