首页 > 教程

鼠标点击波纹特效 html+css+js

slbcun
2025-04-07
1087 ℃

定义标签

<div class="card">
  <img src="3.3.png" alt="x" width="100%" />
  <h3>北极光之夜</h3>
  <p>生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命!</p>
</div>

卡片和文字的基本样式

.card {
  width: 200px;
  height: 300px;
  box-shadow: 1px 1px 5px #555;
  cursor: pointer;
  background-color: rgb(243, 243, 243);
  position: relative;
  overflow: hidden;
}
.card h3,
.card p {
  padding: 5px;
  text-align: center;
  font-family: "fangsong";
  font-weight: 700;
  user-select: none;
}

cursor: pointer; 鼠标样式为小手。 overflow: hidden; 子元素大小超出卡片区域的被隐藏。 user-select: none; 文本不可选中。

js部分，见注释

<script>
  /* 获取元素 */
  var card = document.querySelector(".card");
  /* 绑定点击事件 */
  card.addEventListener("click", function (e) {
    /* 获取鼠标点击的水平位置 */
    let x = e.clientX - this.offsetLeft;
    /* 获取鼠标点击的垂直位置 */
    let y = e.clientY - this.offsetTop;
    /* 创建一个span元素 */
    let circle = document.createElement("span");
    /* 为span元素添加定位的 left 属性 */
    circle.style.left = x + "px";
    /* 为span元素添加定位的 top 属性 */
    circle.style.top = y + "px";
    /* 卡片添加创建好的span元素 */
    card.appendChild(circle);
    /* 1s后移除span元素 */
    setInterval(function () {
      circle.remove();
    }, 1000);
  });
</script>

添加上一步创建的 span 元素的css样式

.card span {
  position: absolute;
  transform: translate(-50%, -50%);

  background-color: rgb(255, 254, 254);
  border-radius: 50%;
  animation: big 1s;
}
@keyframes big {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}

position: absolute; 绝对定位。 transform: translate(-50%,-50%); 向左和上移动自身宽度和高度的一半。 animation: big 1s；定义动画，刚好1s完成动画。 opacity: 1; 不透明。 opacity: 0; 透明。

完整源码

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: radial-gradient(white, black);
      }
      .card {
        width: 200px;
        height: 300px;
        box-shadow: 1px 1px 5px #555;
        cursor: pointer;
        background-color: rgb(243, 243, 243);
        position: relative;
        overflow: hidden;
      }
      .card h3,
      .card p {
        padding: 5px;
        text-align: center;
        font-family: "fangsong";
        font-weight: 700;
        user-select: none;
      }
      .card span {
        position: absolute;
        transform: translate(-50%, -50%);

        background-color: rgb(255, 254, 254);
        border-radius: 50%;
        animation: big 1s;
      }
      @keyframes big {
        0% {
          width: 0px;
          height: 0px;
          opacity: 1;
        }
        100% {
          width: 400px;
          height: 400px;
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <img src="3.3.png" alt="x" width="100%" />
      <h3>北极光之夜</h3>
      <p>生活下去,错误下去,堕落下去,为胜利而欢呼,从生命中重新创造生命!</p>
    </div>
    <script>
      var card = document.querySelector(".card");
      card.addEventListener("click", function (e) {
        let x = e.clientX - this.offsetLeft;
        let y = e.clientY - this.offsetTop;

        let circle = document.createElement("span");
        circle.style.left = x + "px";
        circle.style.top = y + "px";

        card.appendChild(circle);

        setInterval(function () {
          circle.remove();
        }, 1000);
      });
    </script>
  </body>
</html>