一款漂亮的滚动条

canwu · 发表于 2024-2-23 10:42:13

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

在找到这段代码：
<font color="#708090"><body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}{if $_G['basescript'] === 'portal' && CURMODULE === 'list' && !empty($cat)} {$cat['bodycss']}{/if}" onkeydown="if(event.keyCode==27) return false;">
<div id="append_parent"></div><div id="ajaxwaitid"></div></font>

复制代码

把下面代码添加到上<body> 之间 </body>

复制代码

2 路径找到 /template/你的模板/common/footer.html

添加到里面 footer.html 里面

复制代码

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

hipass · 发表于 2024-2-23 10:46:54

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

海哥 · 发表于 2024-2-23 13:52:14

很炫，很给力

产品服务