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 {
        	-webkit-transform:scale(1.4) translateX(-35%) translateY(-35%);
        	transform:scale(1.4) translateX(-35%) translateY(-35%);
        	border:0
        }
        .cursor2.hover {
        	background:rgba(255,255,255,0.1)
        }
        .cursor2.hover .progress-wrap {
        	box-shadow:inset 0 0 0 2px rgba(255,255,255,0)
        }
        .cursor2.hover .progress-wrap svg.progress-circle path {
        	opacity:.4
        }
        .navbar-brand {
        	height:35px;
        	position:fixed;
        	top:40px;
        	right:40px;
        	z-index:3;
        	width:auto;
        	display:inline-block;
        	margin:0;
        	padding:0;
        	-webkit-transition:all .3s ease-out;
        	transition:all .3s ease-out
        }
        .navbar-brand::after {
        	position:absolute;
        	content:'';
        	top:50%;
        	left:50%;
        	width:70px;
        	transform:translate(-50%,-50%);
        	height:70px;
        	opacity:1;
        	z-index:-1;
        	background-image:linear-gradient(160deg,var(--black-blue-light-3),var(--black-blue-light));
        	animation:border-transform 10s linear infinite alternate forwards;
        	-webkit-transition:all 200ms linear;
        	transition:all 200ms linear
        }
        .navbar-brand img {
        	padding:7px 0;
        	height:100%;
        	width:auto;
        	display:block;
        	-webkit-transition:all .3s ease-out;
        	transition:all .3s ease-out
        }
        @-webkit-keyframes border-transform {
        	0%,100% {
        	b.........完整代码请登录后点击上方下载按钮下载查看