如何创建鼠标悬停时的流动水状倾斜过渡效果及波纹滑块？

一、流动水倾斜过渡动画实现 #

实现思路 #

利用CSS伪元素创建倾斜的渐变背景，通过transform和过渡动画，在鼠标悬停时触发背景的位移效果，模拟水流流动的倾斜过渡感。核心是通过渐变的横向滑动+倾斜角度，营造流动视觉。

完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流动水倾斜动画</title>
    <style>
        .water-hover-box {
            position: relative;
            width: 320px;
            height: 160px;
            margin: 30px auto;
            background-color: #0056b3;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            overflow: hidden;
            cursor: pointer;
            border-radius: 8px;
        }

        .water-hover-box::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                rgba(255,255,255,0.12) 0%,
                rgba(255,255,255,0.35) 50%,
                rgba(255,255,255,0.12) 100%
            );
            transform: rotate(-45deg) translateX(-100%);
            transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .water-hover-box:hover::before {
            transform: rotate(-45deg) translateX(100%);
        }
    </style>
</head>
<body>
    <div class="water-hover-box">鼠标悬停查看流动水效果</div>
</body>
</html>

代码说明 #

• .water-hover-box：基础容器，开启overflow: hidden隐藏超出范围的伪元素，保证视觉完整性。
• 伪元素::before：创建覆盖容器的倾斜渐变背景，初始状态通过translateX(-100%)移出可视区。
• 悬停时触发translateX(100%)，让渐变背景从左至右滑动，结合45度倾斜角模拟水流流动的过渡效果。

二、波纹效果滑块实现 #

实现思路 #

监听鼠标在滑块内的水平移动，实时计算鼠标位置，动态创建波纹元素，通过CSS动画控制波纹的扩散、淡出，同时保持波纹在滑块垂直居中位置，实现跟随鼠标滑动的连续波纹效果。

完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>波纹滑块</title>
    <style>
        .ripple-slider {
            position: relative;
            width: 85%;
            height: 90px;
            margin: 60px auto;
            background-color: #e9ecef;
            overflow: hidden;
            cursor: pointer;
            border-radius: 12px;
        }

        .ripple {
            position: absolute;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0,123,255,0.45) 0%, rgba(0,123,255,0) 75%);
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: ripple-expand 0.9s ease-out forwards;
        }

        @keyframes ripple-expand {
            0% {
                width: 45px;
                height: 45px;
                opacity: 0.65;
            }
            100% {
                width: 220px;
                height: 220px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="ripple-slider" id="rippleSlider"></div>

    <script>
        const slider = document.getElementById('rippleSlider');

        slider.addEventListener('mousemove', function(e) {
            const rect = slider.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = rect.height / 2;

            const ripple = document.createElement('div');
            ripple.classList.add('ripple');
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;

            slider.appendChild(ripple);

            // 动画结束后移除波纹元素，避免DOM堆积
            setTimeout(() => {
                ripple.remove();
            }, 900);
        });
    </script>
</body>
</html>

代码说明 #

• .ripple-slider：滑块容器，开启overflow: hidden限制波纹显示范围。
• .ripple：定义波纹样式，径向渐变实现中心浓、边缘淡的效果，动画控制波纹从中心向外扩散并淡出。
• JS部分：监听鼠标移动事件，计算鼠标在滑块内的水平坐标，动态生成波纹元素；动画结束后自动移除元素，保证性能。

内容的提问来源于stack exchange，提问作者Kailash