DIV 波纹效果

要实现一个动态波纹效果，通常可以使用 CSS 和 JavaScript。以下是一个简单的示例，展示了如何在点击一个 div 元素时产生波纹效果。

HTML#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>波纹效果</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="ripple-container">
        <div class="ripple"></div>
        <button class="ripple-btn">点击我</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)#

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.ripple-container {
    position: relative;
    overflow: hidden;
}

.ripple-btn {
    padding: 20px 40px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #6200ea;
    color: #ffffff;
    border-radius: 8px;
    position: relative;
    outline: none;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

JavaScript (script.js)#

const button = document.querySelector('.ripple-btn');

button.addEventListener('click', function (e) {
    const ripple = document.querySelector('.ripple');
    const rect = button.getBoundingClientRect();
    
    const size = Math.max(rect.width, rect.height);
    ripple.style.width = ripple.style.height = `${size}px`;
    ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
    ripple.style.top = `${e.clientY - rect.top - size / 2}px`;
    
    ripple.classList.add('active');
    
    // 移除动画类以便下次点击可以重新触发效果
    ripple.addEventListener('animationend', () => {
        ripple.classList.remove('active');
    });
});

解释#

HTML：
- 创建一个包含按钮和波纹效果的容器。
CSS：
- 为按钮和波纹设置样式。波纹是一个绝对定位的 div，初始状态为透明和缩放为 0。
JavaScript：
- 监听按钮的点击事件，计算波纹的位置和大小，然后通过 CSS 动画实现波纹效果。波纹将在按钮上移动，并逐渐变大而且消失。

运行效果#

将以上代码放入您的项目中，运行后，当您单击按钮时，会看到一个动态的波纹效果。您可以根据需要进一步调整样式和动画效果！

HTML#

CSS (styles.css)#

JavaScript (script.js)#

解释#

运行效果#

相关文章