JavaScript 水波纹效果

在JavaScript中，水波纹效果方法可以在用户与UI元素进行交互时提供即时的变化或视觉效果，以引起用户的注意。这种视觉效果的变化或任何与UI的交互都是为了让用户感知到。

当我们构建UI并希望与用户进行一些交互时，水波纹效果是非常有用的。借助水波纹效果，我们可以实现这一点。

水波纹效果的特点：

与UI的交互
在动作上产生视觉变化
为用户提供强大而吸引人的UI

让我们看一些示例以更好地理解它：

示例1： 在按钮上悬停时触发水波纹效果。

index.html： 创建一个容器div和按钮布局。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Ripple Effect</title> 
    <link rel="stylesheet" href="./index.css"> 
    <script src="./index.js"></script> 
</head> 
  
<body> 
    <div class="display"> 
        <a class="HOVER"> 
            <span></span> 
            <text>Hover Me!</text> 
        </a> 
    </div> 
</body> 
  
</html>

index.css: 添加一些CSS用于设计和视觉效果

CSS

/* Write CSS Here */
@keyframes shake { 
    25% { 
        transform:  
          rotate(calc(var(--angle) * -1)); 
    } 
  
    50% { 
        transform: rotate(var(--angle)); 
    } 
  
    100% { 
        transform: rotate(0deg); 
    } 
} 
  
body { 
    font: 100 1.3em sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    padding: 0 5rem; 
} 
  
h1 { 
    font-weight: 100; 
} 
  
.display { 
    display: grid; 
    grid-template-columns: 50% 50%; 
    gap: 0.1em; 
} 
  
.HOVER { 
    --width: 100%; 
    --time: 0.7s; 
  
    position: relative; 
    display: inline-block; 
    height: 1em; 
    padding: 1em; 
  
    color: white; 
    background: #222; 
    overflow: hidden; 
} 
  
.HOVER text { 
    position: relative; 
    z-index: 5; 
  
    transition: color var(--time); 
} 
  
.HOVER:hover text { 
    color: #222; 
} 
  
.HOVER span { 
    position: absolute; 
    display: block; 
    content: ""; 
    z-index: 0; 
    width: 0; 
    height: 0; 
  
    border-radius: 100%; 
    background: #fff; 
  
    transform: translate(-50%, -50%); 
    transition: width var(--time),  
                  padding-top var(--time); 
} 
  
.HOVER:hover span { 
    width: calc(var(--width) * 2.25); 
    padding-top: calc(var(--width) * 2.25); 
}

index.js: 此JavaScript文件在鼠标悬停在按钮布局区域时调用动画。它在鼠标悬停时调用事件，并添加CSS的动画类，当鼠标离开布局区域时移除该类。

Javascript

const ANIMATEDCLASSNAME = "animated"; 
const ELEMENTS = document.querySelectorAll(".HOVER"); 
const ELEMENTS_SPAN = []; 
  
ELEMENTS.forEach((element, index) => { 
    let addAnimation = false; 
  
  
    if (!ELEMENTS_SPAN[index]) 
        ELEMENTS_SPAN[index] = 
            element.querySelector("span"); 
  
    element.addEventListener("mouseover", e => { 
        ELEMENTS_SPAN[index].style.left = 
            e.pageX - element.offsetLeft + "px"; 
        ELEMENTS_SPAN[index].style.top = 
            e.pageY - element.offsetTop + "px"; 
  
        // Add an animation-class to animate via CSS. 
        if (addAnimation)  
            element.classList.add(ANIMATEDCLASSNAME); 
    }); 
  
    element.addEventListener("mouseout", e => { 
        ELEMENTS_SPAN[index].style.left = 
            e.pageX - element.offsetLeft + "px"; 
        ELEMENTS_SPAN[index].style.top = 
            e.pageY - element.offsetTop + "px"; 
    }); 
});

输出: 当我们在浏览器中打开index.html文件或使用实时服务器打开它时，输出如下。

JavaScript 水波纹效果

示例2： Material UI类似按钮的水波纹效果。

index.html： 创建一个包含按钮的容器div

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Ripple Effect</title> 
    <link rel="stylesheet" href="./index.css"> 
    <script src="./index.js"></script> 
</head> 
  
<body> 
    <div class="display"> 
        <button class="ripple">Button</button> 
    </div> 
</body> 
  
</html>

index.css: 为容器和涟漪效果添加了样式。

CSS

/* Write CSS Here */
  
body { 
    font: 100 1.3em sans-serif; 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    padding: 0 5rem; 
    min-height: 100vh; 
} 
  
.display { 
    display: flex; 
    flex-direction: column; 
    align-content: center; 
    justify-content: center; 
    margin: 0 auto; 
    height: 100vh; 
    max-width: 500px; 
} 
.ripple { 
    background-position: center; 
    transition: background 0.8s; 
} 
.ripple:hover { 
    background: #47a7f5 radial-gradient(circle,  
          transparent 1%, #47a7f5 1%) 
        center/15000%; 
} 
.ripple:active { 
    background-color: #6eb9f7; 
    background-size: 100%; 
    transition: background 0s; 
} 
  
/* Button style */
button { 
    border: none; 
    border-radius: 2px; 
    padding: 12px 18px; 
    font-size: 16px; 
    text-transform: uppercase; 
    cursor: pointer; 
    color: white; 
    background-color: #2196f3; 
    box-shadow: 0 0 4px #999; 
    outline: none; 
}