技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

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

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

本实例介绍

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

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

 

demodownload

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

scroll-behavior: smooth;非常重要,它表示内容切换时是滑动过渡的,而不是跳动的。

navposition: fixed;表示导航位置是固定的,而top:0;left:0;width: 100%;是定位导航条的作用:位于顶部,宽度为满屏。

sectionwidth: 100vw;height: 100vh;表示内容(页)区域宽度和高度都是满屏。

总结

该实例代码简单易理解易使用,效果却很好,喜欢滑动翻页的朋友一定要好好收藏了。

你可能感兴趣

相关文章

标签: css  翻页  滑动  
x
  • 站长推荐
/* 左侧显示文章内容目录 */