接口测试平台代码实现143: 平台主题-夏日清凉2

好我们继续接着上节课的主题改版 优化：

在菜单被改了颜色后，我们想起来之前做的这个 控制菜单显示隐藏的按钮了。

现在回到welcome.html中，对它进行更改：

效果如图：

然后是头像上方的 欢迎语 和 用户名：

然后是项目列表页面的优化：

看着太靠左边了，所以我们给最左边增加空的字段名和字段内容。

现在看着好很多。继续优化：

俩个按钮的颜色：

然后是这个表格table的 样式，我们改成这样：

效果：

然后本节最后，要教给大家一个动态背景色的方法。

首先，你要在html最上方，head里的style里 新建自己的 样式和对应动画：

<style>
   .wqrf_back{
      background-image: linear-gradient(50deg, #ffcde8,white, #a5e5ff);
      background-size: 200%;
      animation: animate_bg 3s infinite;
  }
  @keyframes animate_bg {
      0%, 100% {
          background-position: 0%, 50%;
      }
      50% {
          background-position: 100%, 50%;
      }
  }
</style>

然后是下面引用：我们打算给这个表头来一下：

效果就出现了，是动态的哦！我给截了不同时刻图：

颜色上自己可以大胆的添加各种颜色，会形成彩虹跑马灯一样的效果哦。也可以自行设置好几十个黑色，然后中间设置俩道白色，就会变成好像玻璃反光 刷的一下的感觉：

当然我们还是老老实实的用 统一的 蓝白淡粉 渐变动效吧。

本节内容到此结束，下节我们去改接口库，并且应用彩色边框技术。