久久久久av_欧美日韩一区二区在线_国产精品三区四区_日韩中字在线

Discuz! 官方交流社區(qū)

標(biāo)題: 一款漂亮的 滾動(dòng)條 [打印本頁]
作者: canwu    時(shí)間: 2024-2-23 10:42
標(biāo)題: 一款漂亮的 滾動(dòng)條
(, 下載次數(shù): 36)

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

  1. 在找到這段代碼 ：
  2. <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;">
  3.         <div id="append_parent"></div><div id="ajaxwaitid"></div></font>
復(fù)制代碼
把下面代碼 添加到上<body> 之間 </body>
  1. <div id="progressbar"></div>
  2. <div id="scrollpath"></div>
復(fù)制代碼
2  路徑  找到 /template/你的模板/common/footer.html  

添加到里面 footer.html  里面

  1. <script type="text/javascript">
  2.         let progress=document.getElementById('progressbar');
  3.         let totalheight=document.body.scrollHeight - window.innerHeight;
  4.         window.onscroll=function(){
  5.                 let progressHeight=(window.pageYOffset / totalheight) *100;
  6.                 progress.style.height=progressHeight + "%";
  7.         }
  8. </script>
復(fù)制代碼
3 路徑 找到 /template/你的模板/common/common.css  

   添加到  common.css  最下面

  1. *{
  2.         -margin: 0;
  3.         -padding: 0;
  4.         -box-sizing: border-box;
  5.     font-family: "Droid Serif","Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;
  6. }
  7. section{
  8.     -padding: 50px;
  9.     -background: #000;
  10.     -min-height: 100vh;
  11. }
  12. section h2{
  13.     font-size: 2.5em;
  14.     color: #fff;
  15. }
  16. section p{
  17.     font-size: 1.2em;
  18.     color: #fff;
  19. }
  20. ::-webkit-scrollbar{
  21.     width: 0;
  22. }
  23. #scrollpath{
  24.     position: fixed;
  25.     top: 0;
  26.     right: 0;
  27.     width: 10px;
  28.     height: 100%;
  29.     background: rgba(255,255,255,0.05);
  30. }
  31. #progressbar{
  32.     position: fixed;
  33.     top: 0;
  34.     right: 0;
  35.     width: 10px;
  36.     background: linear-gradient(to top,#008aff,#00ffe7);
  37.     animation: animate 5s linear infinite;
  38. }
  39. @keyframes animate{
  40.     0%,100%{
  41.         filter:hue-rotate(0deg);
  42.     }
  43.     50%{
  44.         filter:hue-rotate(360deg);
  45.     }
  46. }
  47. #progressbar:before{
  48.     content: '';
  49.     position: absolute;
  50.     top: 0;
  51.     left: 0;
  52.     width: 100%;
  53.     height: 100%;
  54.     background: linear-gradient(to top,#008aff,#00ffe7);
  55.     filter: blur(10px);
  56. }

  58. #progressbar:after{
  59.     content: '';
  60.     position: absolute;
  61.     top: 0;
  62.     left: 0;
  63.     width: 100%;
  64.     height: 100%;
  65.     background: linear-gradient(to top,#008aff,#00ffe7);
  66.     filter: blur(30px);
  67. }
復(fù)制代碼


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






作者: hipass    時(shí)間: 2024-2-23 10:46
效果很炫酷，謝謝分享，不過不適合應(yīng)用于我的網(wǎng)站
作者: 海哥    時(shí)間: 2024-2-23 13:52
很炫，很給力
作者: TaC    時(shí)間: 2024-11-18 14:51
你網(wǎng)站鼠標(biāo)聲音怎么弄的，分享下
作者: 風(fēng)吹故人香    時(shí)間: 2024-11-18 18:16
很漂亮收藏了
作者: 風(fēng)吹故人香    時(shí)間: 2024-11-18 21:22
感覺首頁字體變歪了



歡迎光臨 Discuz! 官方交流社區(qū) (http://www.9999xn.com/) Powered by Discuz! W1.0