用 CSS 制作简单过渡页点亮你的中秋节

2023-12-11 03:15:05

大家好，中秋节快到了，为了让大家的网站更应景，今天我来教大家用 CSS 制作一个简单的过渡页。

这个过渡页采用 CSS 中的动画和过渡效果，可以平滑地引导用户进入你的中秋节网站，营造一种节日氛围。

步骤 1：创建 HTML 结构

首先，我们需要创建 HTML 结构。创建一个新的 HTML 文件并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>中秋节快乐！</h1>
  <p>欢迎来到我的中秋节网站。</p>
  <a href="index.html">进入网站</a>
</body>
</html>

步骤 2：添加 CSS 样式

接下来，我们需要添加 CSS 样式来创建过渡效果。在 <head> 部分添加以下代码：

body {
  background: #f5f5f5;
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
  font-size: 2rem;
  margin-top: 50px;
}

p {
  text-align: center;
  font-size: 1.5rem;
}

a {
  display: block;
  margin: 0 auto;
  padding: 10px 20px;
  background: #ff9900;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.show-transition {
  opacity: 1;
}

步骤 3：使用 JavaScript 添加过渡效果

最后，我们需要使用 JavaScript 来添加过渡效果。在 <body> 部分添加以下代码：

const transition = document.querySelector('.transition');

window.addEventListener('load', () => {
  setTimeout(() => {
    transition.classList.add('show-transition');
  }, 1000);
});