一款漂亮的 滚动条
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 效果很炫酷，谢谢分享，不过不适合应用于我的网站 很炫，很给力
页:
[1]