js+css实现页面滚动左侧页数指示圆点效果代码

代码语言:html

所属分类:加载滚动

代码描述:js+css实现页面滚动左侧页数指示圆点效果代码

代码标签: js css 页面 滚动 左侧 页数 指示 圆点

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css?family=Hanken%20Grotesk:700|Hanken%20Grotesk:400");
        
        :root {
          --text: #c5c5d1;
          --background: #191924;
          --secondary: #2b2234;
          --accent: #463854;
        }
        
        h1 {
          font-size: 4.21rem; /* 67.36px */
        }
        
        h2 {
          font-size: 3.158rem; /* 50.56px */
        }
        
        h3 {
          font-size: 2rem;
        }
        
        p {
          font-size: 1rem;
          line-height: 175%;
        }
        
        * {
          scroll-behavior: smooth;
          box-sizing: border-box;
          font-family: "Hanken Grotesk";
          font-size: 1rem;
          transition: all ease 0.1s;
        }
        
        body {
          background-color: var(--background);
          color: var(--text);
        }
        
        a {
          text-decoration: none;
          color: inherit;
          position: relative;
          opacity: 0;
          text-wrap: nowrap;
          display: block;
        }
        
        .progress-bar:hover a {
          opacity: 1;
        }
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0