css动画鼠标跟随事件

CSS动画鼠标跟随事件基础概念

CSS动画鼠标跟随事件是指通过CSS技术实现的一种效果，当鼠标在页面上移动时，某个元素会跟随鼠标的移动而移动。这种效果通常用于增强用户体验，使页面更加生动和有趣。

类型

固定跟随：元素始终跟随鼠标移动，位置固定在鼠标指针的某个偏移位置。
边界跟随：元素在页面内跟随鼠标移动，但不会超出页面边界。
路径跟随：元素沿着预设的路径跟随鼠标移动。

应用场景

交互式菜单：当用户将鼠标悬停在菜单项上时，菜单项可以跟随鼠标移动，提供更直观的交互体验。
游戏元素：在某些游戏中，角色或道具可以跟随鼠标移动，增加游戏的互动性和趣味性。
广告效果：广告元素可以跟随鼠标移动，吸引用户的注意力。

示例代码

以下是一个简单的CSS动画鼠标跟随事件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Mouse Follow</title>
    <style>
        .follower {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            pointer-events: none; /* 防止元素干扰鼠标事件 */
            animation: follow 0.1s linear infinite;
        }

        @keyframes follow {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(var(--mouse-x) - 25px));
            }
            50% {
                transform: translateY(calc(var(--mouse-y) - 25px));
            }
        }
    </style>
</head>
<body>
    <div class="follower"></div>

    <script>
        document.addEventListener('mousemove', (event) => {
            document.documentElement.style.setProperty('--mouse-x', event.clientX + 'px');
            document.documentElement.style.setProperty('--mouse-y', event.clientY + 'px');
        });
    </script>
</body>
</html>