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