可以使用CSS的`animation`和`keyframes`属性来实现弹出式对话框特效。下面是一个简单的示例代码:

HTML部分:
html

这是一个对话框

这是对话框的内容。

CSS部分:
css
.dialog-overlay {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
z-index: 999;
animation: dialogFadeIn 0.3s forwards;
}

.dialog {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: scale(0.5);
animation: dialogZoomIn 0.3s forwards;
}

@keyframes dialogFadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}

@keyframes dialogZoomIn {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.open-dialog-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

.close-dialog-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #dc3545;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

JavaScript部分:
javascript
const openDialogBtn = document.querySelector('.open-dialog-btn');
const closeDialogBtn = document.querySelector('.close-dialog-btn');
const dialogOverlay = document.querySelector('.dialog-overlay');

openDialogBtn.addEventListener('click', function() {
dialogOverlay.style.display = 'flex';
});

closeDialogBtn.addEventListener('click', function() {
dialogOverlay.style.display = 'none';
});

以上代码实现了一个带有淡入和放大动画效果的弹出式对话框。点击"打开对话框"按钮,对话框将以动画的方式从屏幕中间弹出,点击"关闭"按钮,对话框将以动画的方式消失。