css+js 实现鼠标尾巴气泡跟随特效

锦鲤看看我

于 2023-12-05 17:02:26 发布

阅读量503

点赞数 6

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_54070657/article/details/134811983

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标尾巴跟随泡泡特效</title>
    <style>
        body {
            overflow: hidden;
        }

        .circle {
            position: absolute;
            pointer-events: none;
            /* 确保这个元素不会影响鼠标事件 */
            opacity: 1;
            transition: opacity 0.8s ease-out;
            /* 渐隐效果 */
            box-shadow: 0px 0px 8px 10px #fff inset;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <script>
        // 这里将添加JavaScript代码
        function createcircle(event) {
            const circle = document.createElement('div');
            circle.classList.add('circle');
            document.body.appendChild(circle);

            // 设置泡泡位置
            circle.style.left = `${event.clientX}px`;
            circle.style.top = `${event.clientY}px`;

            // 设置泡泡大小和其他样式属性
            const size = Math.floor(Math.random() * 10 + 20); // 随机生成5到15之间的大小
            circle.style.width = `${size}px`;
            circle.style.height = `${size}px`;
            // circle.style.boxShadow = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
            circle.style.boxShadow = ` 0px 0px 8px 0px hsl(${Math.random() * 360}, 90%, 70%) inset`

            // 设置泡泡的运动轨迹
            const destinationX = event.clientX + (Math.random() - 0.5) * 2 * 75;
            const destinationY = event.clientY + (Math.random() - 0.5) * 2 * 75;
            const animation = circle.animate([
                {
                    transform: `translate(0, 0)`,
                    opacity: 1
                },
                {
                    transform: `translate(${destinationX - event.clientX}px, ${destinationY - event.clientY}px)`,
                    opacity: 1
                }
            ], {
                duration: Math.random() * 1000 + 500, // 随机动画持续时间
                easing: 'ease-out'
            });

            // 动画完成后移除泡泡
            animation.onfinish = () => {
                circle.remove();
            };
        }
        document.addEventListener('mousemove', createcircle);

    </script>

</body>

</html>