HTML如何实现水波纹？点击扩散效果怎么做？

div

span

div

<button class="ripple-button">点击我，看水波纹</button>
<!-- 你也可以在其他容器上实现，只要设置好position: relative -->
<!-- <div class="some-other-container">点击我</div> -->

button

.ripple-button {
    position: relative; /* 确保子元素（水波纹）能相对定位 */
    overflow: hidden; /* 隐藏超出边界的水波纹部分 */
    padding: 15px 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮，提升体验 */
}

.ripple-button:hover {
    background-color: #0056b3;
}

/* 水波纹元素的基础样式 */
.ripple {
    position: absolute;
    border-radius: 50%; /* 圆形 */
    background-color: rgba(255, 255, 255, 0.7); /* 白色半透明 */
    transform: scale(0); /* 初始大小为0 */
    opacity: 1; /* 初始不透明 */
    animation: ripple-animation 0.6s forwards; /* 动画名称、时长、填充模式 */
    pointer-events: none; /* 确保水波纹不阻挡下层元素的点击事件 */
}

@keyframes ripple-animation {
    to {
        transform: scale(4); /* 放大到足够覆盖父元素 */
        opacity: 0; /* 完全透明 */
    }
}

position: relative

overflow: hidden

border-radius: 50%

transform: scale(0)

opacity: 1

animation: ripple-animation 0.6s forwards

forwards

pointer-events: none

document.querySelectorAll('.ripple-button').forEach(button => {
    button.addEventListener('click', function(e) {
        const buttonRect = this.getBoundingClientRect(); // 获取按钮的位置和大小
        const ripple = document.createElement('span'); // 创建一个span元素作为水波纹
        ripple.classList.add('ripple');

        // 计算点击位置相对于按钮的偏移量
        const x = e.clientX - buttonRect.left;
        const y = e.clientY - buttonRect.top;

        // 设置水波纹的初始位置，使其中心与点击位置对齐
        // 这里的size需要足够大，确保波纹能完全覆盖按钮
        const size = Math.max(buttonRect.width, buttonRect.height) * 2; 
        ripple.style.width = ripple.style.height = `${size}px`;
        ripple.style.left = `${x - size / 2}px`;
        ripple.style.top = `${y - size / 2}px`;

        this.appendChild(ripple); // 将水波纹添加到按钮内部

        // 动画结束后移除元素，避免DOM堆积
        ripple.addEventListener('animationend', () => {
            ripple.remove();
        });
    });
});

forEach

.ripple-button

e.clientX

e.clientY

left

top

size

animationend

ripple.remove()

:active

transition

animation

X

Y

::before

::after

createElement

appendChild

remove

createElement