鼠标跟随特效代码，鼠标特效代码教程

来源：网络作者：日期：2025-12-03 13:55:23

鼠标跟随特效代码，鼠标特效代码教程

打造炫酷网页交互体验

在现代网页设计中，交互体验已成为吸引用户的关键因素，鼠标跟随特效作为提升用户体验的常见手段，能够通过视觉反馈增强用户与网页的互动感，本文将详细介绍如何使用纯CSS和JavaScript实现多种鼠标跟随特效,并提供完整代码示例。

鼠标跟随特效代码，鼠标特效代码教程

基础实现原理

鼠标跟随特效的核心原理是通过监听鼠标移动事件，获取鼠标位置，并在页面上创建跟随鼠标的视觉元素,实现步骤如下：

创建跟随元素（如div、canvas等）
监听鼠标移动事件获取坐标
根据鼠标位置更新元素样式
添加动画效果增强视觉体验

完整代码示例

基础跟随效果（CSS实现）

<!DOCTYPE html>
<html>
<head>
    <style>
        .cursor {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1000;
            transform: translate(-50%, -50%);
        }
        /* 自定义鼠标样式 */
        body {
            cursor: none; /* 隐藏默认光标 */
        }
    </style>
</head>
<body>
    <div class="cursor"></div>
    <script>
        const cursor = document.querySelector('.cursor');
        document.addEventListener('mousemove', function(e) {
            cursor.style.left = e.pageX + 'px';
            cursor.style.top = e.pageY + 'px';
        });
    </script>
</body>
</html>

增强版跟随效果（CSS动画）

<!DOCTYPE html>
<html>
<head>
    <style>
        .cursor {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 1000;
            transform: translate(-50%, -50%);
            transition: transform 0.1s ease;
        }
        .cursor-follower {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: white;
            pointer-events: none;
            z-index: 1001;
            transform: translate(-50%, -50%);
            transition: transform 0.2s ease;
        }
        body {
            cursor: none;
        }
        /* 添加动画效果 */
        @keyframes pulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.5); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
        .cursor:hover {
            animation: pulse 0.5s infinite;
        }
    </style>
</head>
<body>
    <div class="cursor"></div>
    <div class="cursor-follower"></div>
    <script>
        const cursor = document.querySelector('.cursor');
        const follower = document.querySelector('.cursor-follower');
        document.addEventListener('mousemove', function(e) {
            cursor.style.left = e.pageX + 'px';
            cursor.style.top = e.pageY + 'px';
            setTimeout(() => {
                follower.style.left = e.pageX + 'px';
                follower.style.top = e.pageY + 'px';
            }, 100);
        });
    </script>
</body>
</html>

多种视觉效果实现

粒子跟随效果

<!DOCTYPE html>
<html>
<head>
    <style>
        #particles {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .particle {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: rgba(255,255,255,0.8);
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="particles"></div>
    <script>
        const particlesContainer = document.getElementById('particles');
        const particleCount = 20;
        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.classList.add('particle');
            particlesContainer.appendChild(particle);
            // 随机初始位置
            const posX = Math.random() * window.innerWidth;
            const posY = Math.random() * window.innerHeight;
            particle.style.left = posX + 'px';
            particle.style.top = posY + 'px';
            // 鼠标跟随动画
            document.addEventListener('mousemove', function(e) {
                const mouseX = e.clientX;
                const mouseY = e.clientY;
                // 移动粒子
                animateParticle(particle, mouseX, mouseY);
            });
        }
        function animateParticle(particle, targetX, targetY) {
            const particleX = parseFloat(particle.style.left);
            const particleY = parseFloat(particle.style.top);
            // 计算方向和距离
            const angle = Math.atan2(targetY - particleY, targetX - particleX);
            const distance = Math.min(Math.sqrt(Math.pow(targetX - particleX, 2) + Math.pow(targetY - particleY, 2)), 100);
            // 移动粒子
            particle.style.left = targetX - Math.cos(angle) * distance + 'px';
            particle.style.top = targetY - Math.sin(angle) * distance + 'px';
        }
    </script>
</body>
</html>

文字跟随效果

<!DOCTYPE html>
<html>
<head>
    <style>
        .cursor-text {
            position: absolute;
            color: white;
            font-size: 16px;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: rgba(0,0,0,0.7);
            pointer-events: none;
            z-index: 1000;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        body {
            cursor: none;
        }
    </style>
</head>
<body>
    <div class="cursor-text"></div>
    <script>
        const cursorText = document.querySelector('.cursor-text');
        document.addEventListener('mousemove', function(e) {
            // 显示文字
            cursorText.textContent = "Hello World";
            cursorText.style.left = e.pageX + 'px';
            cursorText.style.top = e.pageY + 'px';
            cursorText.style.opacity = '1';
            // 3秒后隐藏
            setTimeout(() => {
                cursorText.style.opacity = '0';
            }, 3000);
        });
    </script>
</body>
</html>