按钮点击发光动画效果

最新推荐文章于 2024-09-14 18:52:56 发布

贾克杰森

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量165

点赞数 4

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_43850391/article/details/140822553

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>按钮点击发光效果</title>
    <style>
      :root {
        --primary-color: #e01b36;
        --secondary-color: #1677ff;
        --pulse-box-shadow-color: #e01b36;
      }
      body{
        margin: 0;
        padding: 0;
      }
      #root {
        width: 100%;
        height: 100vh;
        background-color: antiquewhite;
        padding: 10px;
      }
      .btn {
        padding: 5px 6px;
        width: fit-content;
        height: fit-content;
        border-radius: 5px;
        border: none;

        display: inline-block;
        cursor: pointer;
        user-select: none;

        position: relative;
      }
      .btn:hover{
        opacity: 0.8;
      }
      .btn:active{
        filter: brightness(90%);
      }
      .primary {
        background-color: var(--primary-color);
        color: #fff;
      }
      .warning {
        background-color: var(--secondary-color);
        color: #fff;
      }

      .pulse,
      .pulse::before {
        content: "";
        width: fit-content;
        box-shadow: 0 0 0 0 var(--pulse-box-shadow-color);
        animation: pulsing 1s linear 1;
      }

      @keyframes pulsing {
        from {
          box-shadow: 0 0 0 0 var(--pulse-box-shadow-color);
        }
        to {
          box-shadow: 0 0 0 0.5rem #0000;
        }
      }
    </style>
  </head>
  <body>
    <div id="root">
      <div class="btn primary">点击发光1</div>
      <div class="btn warning">点击发光2</div>
    </div>
  </body>
  <script>
    const root = document.querySelector("#root");
    root.addEventListener("click", (e) => {
      if (e.target.classList.contains("btn")) {
        // 先去除pulse
        console.log(e.target.classList);
        e.target.classList.contains("pulse") &&
          e.target.classList.remove("pulse");
        console.log(`点击了-${e.target.innerText}`, e.target);
        const clickedBtnColor = getComputedStyle(e.target).backgroundColor;
        e.target.classList.toggle("pulse");
        e.target.style.setProperty("--pulse-box-shadow-color", clickedBtnColor);
        setTimeout(() => {
          e.target.classList.remove("pulse");
        },1000)
      } else {
        console.log("未点击btn");
      }
    });
  </script>
</html>