[网站美化]给Joe主题美化一下进度条

目录

• CSS文件
• JS文件
• div盒子

CSS文件

进度条的美化主要是通过css进行装饰，大家在网站的静态文件目录创建一个文件叫jindutiao.css，将下面的代码复制到创建的文件里面随后保存，我们进行下一步的操作。

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  margin: 0;
  z-index: 99999;
  background-color: #999;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
}

/* 运用渐变色实现 */
.gradient {
  background: linear-gradient(to right, #FF0080, #FF8C00, #00FF7F);
}

/* 运用动画效果实现 */
.animation {
  height: 5px;
  background-color: #aaa;
  opacity: .5;
  animation: progress-animation 2s linear infinite;
}

@keyframes progress-animation {
  0% {
    transform: scaleX(0) translateX(-100%);
  }
  
  50% {
    transform: scaleX(1) translateX(0%);
  }

  100% {
    transform: scaleX(0) translateX(100%);
  }
}

/* 运用彩虹色带实现 */
.rainbow {
  height: 5px;
  background: repeating-linear-gradient(-45deg, red, orange, yellow, green, blue, indigo, violet);
  animation: progress-animation2 5s infinite;
}

@keyframes progress-animation2 {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

h1, p {
  margin: 20px;
}

创建完成后进行文件的引入，我是在joe主题的usr/themes/Joe/public/include.php进行的css文件的引入，引入的代码是： joe主题路径引入样式：<link href="<?php _getAssets('assets/css/jindutiao.css'); ?>" rel="stylesheet" />
通用引入样式： <link rel="stylesheet" href="/usr/themes/Joe/assets/css/jindutiao.css">
这里就不做太多的解释啦，大家都是有网站的人，引入这些简直就是轻轻松松。

JS文件

也是一样的，在主题的静态资源文件目录：/urs/themes/Joe/assets/js下创建一个名为jindutiao.js的文件，随后保存，把下面的代码复制到你创建的文件里面：

window.onload = function () {
  var progressBar = document.createElement('div');
  progressBar.classList.add('progress-bar', 'animation');
  document.body.appendChild(progressBar);
}

创建完js文件之后也是要去header.php文件或者include.php文件引入，引入代码: <script src="https://www.nmssb.cn/usr/themes/Joe/assets/js/jindutiao.js"></script>

div盒子

<!--进度条美化盒子版块渐变色-->
<!--<div class="progress-bar gradient"></div>-->
<!--进度条美化盒子版块动画---->
<!--<div class="progress-bar animation"></div>-->
<!--进度条美化盒子版块彩虹色------>
<div class="progress-bar rainbow"></div>

把上面的代码放在header.php文件里面的最上面，需要用到的代码就把注释解开，不需要的要用注释给它注释掉，不然会出现BUG，具体是否出现bug还未尝试。

总结

在主题的静态资源目录创建需要的css文件和js文件，随后在head或joe主题的include里面引入js和css代码，引入完成后在主题的public/header.php中的顶部位置粘贴复制的div盒子代码，然后保存，访问自己的网站然后ctrl+f5强制刷新一下即可看见效果，访问本站也可以看到效果，本站使用的是彩虹色的进度条美化。