h5实现光线滑动效果

html布局

```html
  <button class="btn" onclick="animateButton(this)">
      按钮
  </button>

css样式

 body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #222;
      }
    
      .btn {
        position: relative;
        display: inline-block;
        padding: 15px 40px;
        font-size: 20px;
        color: white;
        background: #9d1d22;
        border: none;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
      }

      .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -90%;
        width: 150%;
        height: 100%;
        background: linear-gradient(
          120deg,
          rgba(255, 255, 255, 0.1) 30%,
          rgba(255, 255, 255, 0.5) 50%,
          rgba(255, 255, 255, 0.1) 70%
        );
        transform: skewX(-140deg);
      }

      .btn.active::after {
        animation: slide-light 0.8s linear;
      }

      @keyframes slide-light {
        0% {
          left: -100%;
        }
        100% {
          left: 100%;
        }
      }

      .actbtn {
        position: relative;
        display: inline-block;
        padding: 15px 40px;
        font-size: 20px;
        color: white;
        border: none;
        border-radius: 5px;
        overflow: hidden;
        cursor: pointer;
        background: radial-gradient(
          50% 38% at 64% 69%,
          #be3535 0%,
          #91191e 100%
        );
        border-image: linear-gradient(
            165deg,
            rgba(199, 79, 71, 1),
            rgba(169, 33, 38, 1),
            rgba(145, 25, 30, 1),
            rgba(130, 21, 26, 1)
          )
          2;
      }

js

 function animateButton(button) {
        button.classList.add("active");
        setTimeout(() => {
          button.classList.remove("active");
        }, 800); // 确保动画完成后移除类名
      }