HTML实战课堂之启动动画弹窗
一：代码片段讲解
小提示：下面是一个包含启动页和弹窗的完整示例。这个示例包括一个简单的启动页和一个弹窗，当用户点击启动页上的按钮时，会显示弹窗。
1. **HTML结构**：
- `#startPage`：启动页，包含一个标题和一个按钮。
- `#overlay`：覆盖层，用于在弹窗显示时覆盖整个页面。
- `#popup`：弹窗，包含一些文本和一个关闭按钮。
2. **CSS样式**：
- 设置基本样式，使启动页居中显示。
- 设置覆盖层和弹窗的样式，使其居中并添加一些视觉效果。
- 默认情况下，启动页是可见的，而覆盖层和弹窗是隐藏的。
3. **JavaScript代码**：
- `window.onload`：当页面加载时，显示启动页。
- `showPopup`函数：隐藏启动页，显示覆盖层和弹窗。
- `closePopup`函数：隐藏覆盖层和弹窗。
二：完整代码
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>启动页与弹窗示例</title><style>/* 样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}#startPage {display: none; /* 默认隐藏 */text-align: center;}#overlay {display: none; /* 默认隐藏 */position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;}#popup {display: none; /* 默认隐藏 */position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);z-index: 1000;}button {padding: 10px 20px;font-size: 16px;cursor: pointer;}</style></head><body><!-- 启动页 --><div id="startPage"><h1>欢迎来到我们的网站！</h1><button onclick="showPopup()">点击这里查看弹窗</button></div><!-- 弹窗内容 --><div id="overlay"></div><div id="popup"><h2>这是一个弹窗</h2><p>这是弹窗的内容。</p><button onclick="closePopup()">关闭</button></div><script>// JavaScript 代码window.onload = function() {document.getElementById('startPage').style.display = 'block'; // 显示启动页};function showPopup() {document.getElementById('startPage').style.display = 'none'; // 隐藏启动页document.getElementById('overlay').style.display = 'block'; // 显示覆盖层document.getElementById('popup').style.display = 'block'; // 显示弹窗}function closePopup() {document.getElementById('overlay').style.display = 'none'; // 隐藏覆盖层document.getElementById('popup').style.display = 'none'; // 隐藏弹窗}</script></body></html>```