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