可可的可 发表于 2024-8-12 15:02:26

一款漂亮的 滚动条



1 路径 找到 /template/你的模板/common/header.html   

在找到这段代码 ：          把下面代码 添加到上 之间
2路径找到 /template/你的模板/common/footer.html

添加到里面 footer.html里面

         let progress=document.getElementById('progressbar');         let totalheight=document.body.scrollHeight - window.innerHeight;         window.onscroll=function(){               let progressHeight=(window.pageYOffset / totalheight) *100;               progress.style.height=progressHeight + "%";         } 3 路径 找到 /template/你的模板/common/common.css

   添加到common.css最下面

*{         -margin: 0;         -padding: 0;         -box-sizing: border-box;   font-family: "Droid Serif","Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif; } section{   -padding: 50px;   -background: #000;   -min-height: 100vh; } section h2{   font-size: 2.5em;   color: #fff; } section p{   font-size: 1.2em;   color: #fff; } ::-webkit-scrollbar{   width: 0; } #scrollpath{   position: fixed;   top: 0;   right: 0;   width: 10px;   height: 100%;   background: rgba(255,255,255,0.05); } #progressbar{   position: fixed;   top: 0;   right: 0;   width: 10px;   background: linear-gradient(to top,#008aff,#00ffe7);   animation: animate 5s linear infinite; } @keyframes animate{   0%,100%{         filter:hue-rotate(0deg);   }   50%{         filter:hue-rotate(360deg);   } } #progressbar:before{   content: '';   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: linear-gradient(to top,#008aff,#00ffe7);   filter: blur(10px); } #progressbar:after{   content: '';   position: absolute;   top: 0;   left: 0;   width: 100%;   height: 100%;   background: linear-gradient(to top,#008aff,#00ffe7);   filter: blur(30px); }

演示地址: https://mp3.wf

站帮网 发表于 2024-8-12 15:02:55

效果很炫酷，谢谢分享，不过不适合应用于我的网站

站帮网 发表于 2024-8-12 15:03:07

很炫，很给力
页: [1]
查看完整版本: 一款漂亮的 滚动条