css进阶项目1

四个页面都放在一个页面上，每个页面都放在一个 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);
  }
}