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

     好的我们继续接着优化。这次优化用例库,我们要学习的是动态彩色边框技术!

    先来看这样一段css:

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

  •  
 .box::before {    content: '';    border-radius: 5px;    position: absolute;    width: calc(100%);    height: calc(100%);    z-index: -1;    background-image: linear-gradient(50deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);    background-size: 300%;    animation: animate_bg 4s infinite;    }    @keyframes animate_bg {        0%, 100% {            background-position: 0%, 50%;        }        50% {            background-position: 100%, 50%;        }    }

这段css,就是动态彩色边框的样式。我们放在顶部head里的style即可。

 

那么问题来了,要怎么用呢?

原则来说 要用俩个div嵌套使用:

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

如图,给最外层的div的class上box,内部div或其他标签变白或半透明背景色。

 

我们打开P_apis.html。 看看现在的弹层什么样:

 

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

找到它的代码:

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

可以看到是一个很大的div,我们给它最外层加上一个div,并给它class设置成box,并且重新设置部分位置大小属性:

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

改动比较大,所以大家可以复制下面的 直接替换:

  •  
{# 全局请求头 #}<div id="project_header_div" class="box" style="display: none;width: 70%;position: fixed;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;">
<div style="margin: 3px;border-radius:5px;height: 70%;padding-left: 10px;background-color: white"> <div class="btn-group" style="float: right"> <button onclick="project_header_save()" type="button" class="btn btn-success">保存</button> <button onclick="project_header_close()" type="button" class="btn btn-default">取消</button> </div> <span>请设置本项目的全局公共请求头:</span> <br><br> <div id="header_plan"> {% for i in project_header %} <input type="text" name="header_id" value="{{ i.id }}" style="display: none;"> <input type="text" name="header_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="请求头name"> = {" <input type="text" name="header_key" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : " <input type="text" name="header_value" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "} <br> {% endfor %} </div> <br> <button onclick="add_project_header()">新增</button> <br><br> </div></div>

然后我们去这个html最开头,head里的style上加入我们本章开头说的那个css:.box 别忘了前面的点

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

看看 这个动态边框的闪烁效果吧~

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

然后我们再给 全局域名也加上这个彩色边框,大家同样直接复制下面的代码替换原来的div即可:

  •  
{# 全局域名 #}<div id="project_host_div" class="box" style="display: none;width: 70%;position: fixed;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;"><div  style="margin: 3px;border-radius:5px;height: 70%;padding-left: 10px;background-color: white">    <div class="btn-group" style="float: right">        <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button>        <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button>    </div>    <span>请设置本项目的全局域名:</span>    <br><br>    <div id="host_plan">        {% for i in project_host %}            <input type="text" name="host_id" value="{{ i.id }}" style="display: none;">            <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="name"> = "            <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> "            <br>        {% endfor %}    </div>    <br>    <button onclick="add_project_host()">新增</button>    <br><br></div></div>

看看效果:

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

好了本节内容到此结束。欢迎继续追。

 

 

 

上一篇:使用Android编写录制视频小程序演示样例


下一篇:​LeetCode刷题实战145:二叉树的后序遍历