纯CSS实现的上下滑动翻页【演示/源码下载】

技术频道 - html技术

纯CSS实现的上下滑动翻页【演示/源码下载】

作者:admin 时间:2023-2-21 19:35:55 浏览:

本文介绍一个纯CSS实现的上下滑动翻页效果，在这之前，我也介绍过左右滑动翻页的实例，如有兴趣可看下面文章：

上下左右“滑动式”翻页过渡效果2例

本实例介绍

点击顶部的导航按钮，网页滑动翻滚到相应的内容。

本实例是纯CSS实现，代码简单易用，无需用到JavaScript脚本，也无需引用第三方插件库文件。

demo download

HTML代码

<body>
  <nav>
    <a href="#page-1">第一页</a>
    <a href="#page-2">第二页</a>
    <a href="#page-3">第三页</a>
  </nav>
  <section id="page-1">Page #1</section>
  <section id="page-2">Page #2</section>
  <section id="page-3">Page #3</section>
</body>

<nav></nav>标签是顶部导航，<a></a>标签是按钮链接。

<section></section>标签是内容（页）。

CSS代码

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

nav {
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  text-align: center;
  background: #212121;
  padding: 10px;
}

nav a {
  color: #FFF;
  text-decoration: none;
  padding: 0 10px;
}

section {
  width: 100vw;
  height: 100vh;
  text-align: center;
  color: #FFF;
  background: red;
  font-size: 60px;
  font-weight: bold;
  line-height: 100vh;
}

#page-1 { background: #F03823; }
#page-2 { background: #FCA101; }
#page-3 { background: #66E017; }