Postman(接口测试工具)，什么是Postman接口-CFANZ编程社区

Postman(接口测试工具)，什么是Postman接口

整体效果

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<button>戳一下</button>

css 部分代码

button{
  width: 140px;
  height: 46px;
  font-size: 16px;
  font-weight: 700;
  color: black;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background-color: #4158D0;
  background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 17%, #e6a731 39%, #8329e2 60%, #3fb75f 80%, #4158D0 100%);
  box-shadow: 0 0 0 2px #000000;
  cursor: pointer;
  transition: all 0.5s ease;
}
button:hover{
  color: #ffffff;
  animation: quick 0.5s linear infinite;  /* 设置动画参数且循坏播放 */
}
@keyframes quick{
  to {
    background-position: 140px 0;  /*  这里的X轴的值等于button的宽度 */
  }
}
button:active{
  transform: translateY(1px);
}

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>多彩变化的按钮</title>
  </head>
  <body>
    <div class="app">
      <button>戳一下</button>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
button{
  width: 140px;
  height: 46px;
  font-size: 16px;
  font-weight: 700;
  color: black;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background-color: #4158D0;
  background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 17%, #e6a731 39%, #8329e2 60%, #3fb75f 80%, #4158D0 100%);
  box-shadow: 0 0 0 2px #000000;
  cursor: pointer;
  transition: all 0.5s ease;
}
button:hover{
  color: #ffffff;
  animation: quick 0.5s linear infinite;
}
@keyframes quick{
  to {
    background-position: 140px;
  }
}
button:active{
  transform: translateY(1px);
}