js+css实现鼠标指针实时显示滚动条进度效果代码-html代码-BFW代码库

js+css实现鼠标指针实时显示滚动条进度效果代码

代码语言：html

代码描述：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:relative;
                width:100%;
                display:block;
                height:100vh
        }
        .center-wrap {
                position:absolute;
                width:100%;
                display:block;
                left:0;
                top:50%;
                transform:translateY(-50%);
                z-index:2
        }
        .progress-wrap {
                height:46px;
                width:46px;
                cursor:pointer;
                display:block;
                border-radius:50px;
                box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2);
                z-index:10000;
                -webkit-transition:all 200ms linear;
                transition:all 200ms linear
        }
        .progress-wrap svg path {
                fill:none
        }
        .progress-wrap svg.progress-circle path {
                stroke:var(--grey);
                stroke-width:4;
                box-sizing:border-box;
                -webkit-transition:all 200ms linear;
                transition:all 200ms linear
        }
        .cursor,.cursor2,.cursor3 {
                position:fixed;
                border-radius:50%;
                transform:translateX(-50%) translateY(-50%);
                pointer-events:none;
                left:-100px;
                top:50%;
                -webkit-transition:all 300ms linear;
                transition:all 300ms linear
        }
        .cursor {
                background-color:#fff;
                z-index:99999;
                height:0;
                width:0
        }
        .cursor2,.cursor3 {
                height:46px;
                width:46px;
                z-index:99998;
                -webkit-transition:all .3s ease-out;
                transition:all .3s ease-out
        }
        .cursor2.hover,.cursor3.hover {
        .........完整代码请登录后点击上方下载按钮下载查看