让你的网站欢迎页过渡更华丽，用HTML创造视觉盛宴

前端

2023-04-15 20:32:55

用HTML为你的网站欢迎页创建惊艳的过渡动画

在竞争激烈的数字世界中，网站的第一印象往往是决定成败的关键因素。而作为网站的入口，欢迎页就是这个第一印象的门面。一个精心设计的欢迎页可以抓住用户的注意力，留下深刻的印象。

而融入过渡动画效果的欢迎页，无疑会更加生动、有趣，让你的网站脱颖而出。今天，我们将探索如何使用 HTML 为你的网站欢迎页创建过渡动画，赋予你的网站勃勃生机。

创建过渡动画效果的步骤

HTML 构建： 为欢迎页内容创建一个 div 容器。
CSS 样式： 设置 div 容器的位置、大小和颜色等样式。
JavaScript 动画： 利用 JavaScript 实现过渡动画效果。

示例代码

以下代码示例演示了如何使用 HTML 和 JavaScript 创建一个从上向下滑动的欢迎页动画：

HTML：

<div id="welcome-page">
  <h1>欢迎来到我的网站</h1>
  <p>欢迎探索我的网络空间，希望你享受这段旅程。</p>
</div>

CSS：

#welcome-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  text-align: center;
}

#welcome-page h1 {
  font-size: 36px;
  margin: 50px 0 20px;
}

#welcome-page p {
  font-size: 16px;
  margin: 0;
}

JavaScript：

// 获取欢迎页元素
var welcomePage = document.getElementById('welcome-page');

// 创建动画对象
var animation = new CSSKeyframesAnimation({
  duration: 1000, // 动画时长（毫秒）
  fillMode: 'forwards', // 保持动画结束后的状态
  iterations: 1, // 动画执行次数
  keyframes: [
    {
      offset: 0, // 动画开始时的关键帧
      opacity: 0, // 透明度
      transform: 'translateY(-100%)' // 从顶部开始
    },
    {
      offset: 1, // 动画结束时的关键帧
      opacity: 1, // 完全不透明
      transform: 'translateY(0)' // 下滑到原位
    }
  ]
});

// 应用动画效果
welcomePage.animate(animation);