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=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
                :root {
                font-size:20px;
                --red:#da2c4d;
                --yellow:#f8ab37;
                --green:#2ecc71;
                --white:#fff;
                --grey-light:#f2f7f9;
                --grey:#ecedf3;
                --black:#080808;
                --black-blue:#1f2029;
                --black-blue-light:#353746;
                --black-blue-light-2:#404255;
                --black-blue-light-3:#4b4d64;
                --black-light:#424455
        }
        body {
                font-family:'Muli',sans-serif;
                font-size:16px;
                font-weight:500;
                line-height:1.65;
                color:var(--grey);
                background-color:var(--black-blue);
                overflow-x:hidden;
                letter-spacing:.2px;
                -webkit-transition:all 200ms linear;
                transition:all 200ms linear;
                text-rendering:optimizeLegibility!important;
                -webkit-font-smoothing:antialiased!important
        }
        h1 {
                font-family:'Muli',sans-serif;
                font-size:11vw;
                font-weight:800;
                line-height:1;
                color:var(--white);
                background:linear-gradient(160deg,var(--white),var(--yellow));
                -webkit-background-clip:text;
                -webkit-text-fill-color:transparent
        }
        .section {
                position.........完整代码请登录后点击上方下载按钮下载查看

网友评论0