前端新手从零开始制作H5页面动画

前端

2023-11-16 13:15:32

嗨，大家好，欢迎来到我的技术博客。今天，我想和大家分享一下我学习前端开发的第15天，我将从一个实例开始实战，实现一个H5页面动画。让我们开始吧！

项目目标：

我的目标是创建一个H5页面动画，邀请大家参加我的生日派对。这个动画应该包括以下元素：

一个带有我名字和生日日期的标题
一个带有派对详情的正文
一个带有RSVP按钮的页脚

项目步骤：

新建项目

首先，我新建了一个项目文件夹，并将其命名为“birthday-party”。然后，我在该文件夹中创建了以下文件：

index.html
style.css
script.js

创建HTML结构

在index.html文件中，我创建了以下HTML结构：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>生日派对</h1>
  <p>我正在举办一个生日派对，并诚挚地邀请您参加。派对将在2023年3月8日星期三晚上7点在[地址]举行。请在2月28日前回复，以便我安排好座位。</p>
  <button>回复</button>

  <script src="script.js"></script>
</body>
</html>

添加CSS样式

在style.css文件中，我添加了以下CSS样式：

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

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  color: #666;
}

button {
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.animated {
  animation: slideIn 2s ease-in-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

添加JavaScript代码

在script.js文件中，我添加了以下JavaScript代码：

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

button.addEventListener('click', () => {
  document.querySelector('h1').classList.add('animated');
});