以下是一个使用HTML、CSS和JavaScript实现的登录弹窗效果示例
- 电脑硬件
- 2025-08-30 06:09:02
以下是一个使用 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以下是一个使用HTML、CSS和JavaScript实现的登录弹窗效果示例由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“以下是一个使用HTML、CSS和JavaScript实现的登录弹窗效果示例”
