如何在网页中实现礼物环绕特效

打开某个活动页面，鼠标一动，屏幕上飘满了礼盒、彩带和气球，这种“礼物环绕特效”总能让人眼前一亮。不少朋友问，这效果是怎么做出来的？其实不难，只要懂点HTML和CSS，再加点JavaScript小技巧，自己也能搞一个。

原理很简单：动态生成+位置浮动

所谓的礼物环绕，本质就是让一些小图标（比如礼盒、星星）围绕着页面某个区域转圈，或者随着鼠标移动而漂浮。我们用DOM动态创建元素，再通过CSS控制动画轨迹，JS负责监听位置变化。

准备素材和结构

先准备好一个小礼物的图标，可以是PNG图，也可以用字体图标或SVG。然后在页面里留个容器，用来挂这些动态元素。

<div id="gift-container" style="position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;"></div>

注意设置 pointer-events: none，不然飘着的礼物会挡住页面其他操作。

用JavaScript生成礼物并动起来

接下来写一段JS，监听页面鼠标移动，在光标附近不断生成礼物元素，并给它们加上飘动动画。

document.addEventListener('mousemove', function(e) {
    const container = document.getElementById('gift-container');
    const gift = document.createElement('div');
    gift.innerHTML = '🎁';
    gift.style.position = 'absolute';
    gift.style.left = (e.clientX - 20) + 'px';
    gift.style.top = (e.clientY - 20) + 'px';
    gift.style.fontSize = Math.random() * 20 + 16 + 'px';
    gift.style.opacity = Math.random() * 0.5 + 0.5;
    gift.style.transform = `rotate(${Math.random() * 360}deg)`;
    gift.style.transition = 'top 1s ease-out, opacity 1s';

    container.appendChild(gift);

    // 一秒后淡出并移除
    setTimeout(() => {
        gift.style.opacity = '0';
        gift.style.top = (e.clientY - 100) + 'px';
    }, 50);

    // 清理DOM避免堆积
    setTimeout(() => {
        container.removeChild(gift);
    }, 1100);
});

这段代码每当你移动鼠标，就会在光标附近“吐”出一个🎁表情，然后让它缓缓上浮、变透明，最后消失。视觉上就像礼物从你滑过的地方冒出来一样。

自定义更炫的效果

如果你不想用emoji，可以换成SVG或图片：

gift.innerHTML = '<img src="gift-icon.svg" width="24">';

还可以加点旋转、缩放动画，用CSS定义：

.gift-float {
    animation: floatRotate 1s ease-out forwards;
}

@keyframes floatRotate {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(-20deg) scale(1.2); }
}

把这个类名加到生成的元素上，礼物飞出去的时候会更有动感。

这种特效适合用在节日活动页、抽奖页面或者个人作品集首页，轻量又吸睛。别滥用就行，不然满屏乱飘反而影响体验。