中文无码人妻在线看,国产黄色视频手机在线观看,国产精品午夜小视频观看

技術(shù)頻道 - html技術(shù)

純CSS實(shí)現(xiàn)的上下滑動(dòng)翻頁(yè)【演示/源碼下載】

作者:admin 時(shí)間:2023-2-21 19:35:55 瀏覽:

本文介紹一個(gè)純CSS實(shí)現(xiàn)的上下滑動(dòng)翻頁(yè)效果，在這之前，我也介紹過(guò)左右滑動(dòng)翻頁(yè)的實(shí)例，如有興趣可看下面文章：

上下左右“滑動(dòng)式”翻頁(yè)過(guò)渡效果2例

本實(shí)例介紹

點(diǎn)擊頂部的導(dǎo)航按鈕，網(wǎng)頁(yè)滑動(dòng)翻滾到相應(yīng)的內(nèi)容。

本實(shí)例是純CSS實(shí)現(xiàn)，代碼簡(jiǎn)單易用，無(wú)需用到JavaScript腳本，也無(wú)需引用第三方插件庫(kù)文件。

demo download

HTML代碼

<body>
  <nav>
    <a href="#page-1">第一頁(yè)</a>
    <a href="#page-2">第二頁(yè)</a>
    <a href="#page-3">第三頁(yè)</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>標(biāo)簽是頂部導(dǎo)航，<a></a>標(biāo)簽是按鈕鏈接。

<section></section>標(biāo)簽是內(nèi)容（頁(yè)）。

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; }