tdetail.wxss

#button{
  position: relative;
  top: 40rpx;
  left: 0;
  margin: 40rpx auto;
  width: 60%;
  height: 78rpx;
  color: white;
  /* margin: 0;
  padding: 0; */
  /*自定义边框*/
  border: 0;
  /*消除默认点击蓝色边框效果*/
  outline: none;
  -webkit-appearence: none;
  background-image: linear-gradient(to right, lime, skyblue);
  box-shadow: 0.1875rem 0.1875rem 0.3125rem -0.1875rem rgba(0,0,0,.3);
  border-radius: 16px;
  padding: 2rpx 10rpx;
  animation: hue 5s linear infinite,hues 1.5s linear infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(180deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes hues {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

#button:hover{
  filter: brightness(130%);
  animation: hue 5s linear infinite;
}