四個頁面都放在一個頁面上，每個頁面都放在一個 section 標籤裡。每個 section 都有一個 id，對應一個頁面。每個頁面的內容基本都一樣，所以寫完第一個之後複製貼上然後更改一下就行。第二頁和第三頁有兩個按鈕，除此之外只有背景色不一樣。

<!-- 第一頁 -->
  <section id="page-1" class="page">
    <h1>歡迎來到歐青拉少</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque enim quasi, inventore dignissimos hic quo.
      Voluptatibus blanditiis laborum officiis voluptatem vitae repellat molestias quas porro? Eligendi quibusdam
      tempore voluptatibus placeat totam molestiae nisi reprehenderit repellat! Id nisi laborum ipsa illo.
 
</p>
    <div>
      <a href="#page-2" class="btn">下一頁
        <i class="fas fa-arrow-circle-down"></i>
      </a>
    </div>
  </section>
  <!-- 第二頁 -->
  <section id="page-2" class="page">
    <h1>第二頁</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque enim quasi, inventore dignissimos hic quo.
      Voluptatibus blanditiis laborum officiis voluptatem vitae repellat molestias quas porro? Eligendi quibusdam
      tempore voluptatibus placeat totam molestiae nisi reprehenderit repellat! Id nisi laborum ipsa illo.
 
</p>
    <div>
      <a href="#page-1" class="btn btn-bark">上一頁
        <i class="fas fa-arrow-circle-up"></i>
      </a>
      <a href="#page-3" class="btn">下一頁
        <i class="fas fa-arrow-circle-down"></i>
      </a>
    </div>
  </section
 
>
  <!-- 第三頁 -->
  <section id="page-3" class="page">
    <h1>第三頁</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque enim quasi, inventore dignissimos hic quo.
      Voluptatibus blanditiis laborum officiis voluptatem vitae repellat molestias quas porro? Eligendi quibusdam
      tempore voluptatibus placeat totam molestiae nisi reprehenderit repellat! Id nisi laborum ipsa illo.</p>
    <div>
      <a href="#page-2" class="btn btn-bark">上一頁
        <i class="fas fa-arrow-circle-up"></i>
      </a>
      <a href="#page-4" class="btn">下一頁
        <i class="fas fa-arrow-circle-down"></i>
      </a>
    </div>
  </section>
  <!-- 第四頁 -->
  <section id="page-4" class="page">
    <h1>第四頁</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque enim quasi, inventore dignissimos hic quo.
      Voluptatibus blanditiis laborum officiis voluptatem vitae repellat molestias quas porro? Eligendi quibusdam
      tempore voluptatibus placeat totam molestiae nisi reprehenderit repellat! Id nisi laborum ipsa illo.</p>
    <div>
      <a href="#page-3" class="btn">上一頁
        <i class="fas fa-arrow-circle-up"></i>
      </a>
    </div>
  </section>

樣式

　　建立幾個 css 變數，四個背景色，一個動畫的執行時間。給 html 標籤設定 scroll-benhavior: smooth; 屬性，作用是錨點連結進行跳轉的時候有一個平滑的效果。給 body 設定一個 overflow: hidden; 作用是讓超出頁面的隱藏掉，這樣給每個 section 設定一個高 100vh 就可以顯示一個頁面。通過 id 給每個頁面新增一個不同的背景色。給 .page 設定彈性佈局，讓它呈縱向排列，並水平、垂直居中。給每個按鈕新增內邊距左右 2rem、上下 1rem。新增一個過渡，這樣可以讓 hover 的效果不是直接生效，有一個過渡的效果。在 hover 裡讓 a 的背景色變為黑色。第一頁 h1 的動畫，首先新增 translateY(-1200px) 屬性，然後新增動畫在 to 的時候讓它等於 0，這樣就有了 h1 從上往下的效果。p 的動畫，首先新增 translateX(-1800px) 屬性，然後新增動畫在 to 的時候讓它等於 0，這樣就有了從左往右的效果。

:root{
  --page-1-cololr: cyan;
  --page-2-cololr: tan;
  --page-3-cololr: teal;
  --page-4-cololr: tomato;
  --animats-speed: 2s;
}
html{
  scroll-behavior: smooth;
}
body{
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
  color: #FFF;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* 每頁的背景色 */
#page-1{
  background: var(--page-1-cololr);
}
#page-2{
  background: var(--page-2-cololr);
}
#page-3{
  background: var(--page-3-cololr);
}
#page-4{
  background: var(--page-4-cololr);
}
/* 每頁相同的樣式 */
.page{
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 4rem;
}
.page h1{
  font-size: 4rem;
}
.page p{
  font-size: 1.3rem;
}
.btn{
  display: inline-block;
  padding: 1rem 2rem;
  background: #f4f4f4;
  text-decoration: none;
  border: none;
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #333;
  transition: .4s;
}
.btn:hover,
.btn-bark{
  background: #333;
  color: #FFF;
}
.btn-bark:hover{
  background: #f4f4f4;
  color: #333;
}
/* 頁面1的動畫 */
#page-1 h1{
  transform: translateY(-1200px);
  animation: heading var(--animats-speed) forwards ease-in;
}
@keyframes heading {
  to{
    transform: translateY(0);
  }
}
#page-1 p{
  transform: translateX(-1800px);
  animation: anima var(--animats-speed) 1s forwards ease-in;
}
@keyframes anima {
  to{
    transform: translateX(0);
  }
}