以下是一个使用 HTML、CSS 和 JavaScript 实现的登录弹窗效果示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>登录弹窗示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 20px;}/* 遮罩层样式 */.modal-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: none;justify-content: center;align-items: center;z-index: 999;}/* 弹窗容器 */.modal-container {background: white;padding: 30px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);width: 320px;animation: modalIn 0.3s ease;}/* 弹窗动画 */@keyframes modalIn {from {transform: translateY(-20px);opacity: 0;}to {transform: translateY(0);opacity: 1;}}/* 表单样式 */.login-form {display: flex;flex-direction: column;}.form-group {margin-bottom: 15px;}input {width: 100%;padding: 8px;border: 1px solid #ddd;border-radius: 4px;box-sizing: border-box;}button {background: #2196F3;color: white;padding: 10px;border: none;border-radius: 4px;cursor: pointer;}button:hover {background: #1976D2;}.close-btn {float: right;cursor: pointer;font-size: 24px;line-height: 1;padding: 0 8px;}</style>
</head>
<body><button onclick="showLoginModal