一：效果展示

二：核心动画

（1）交互功能：

• 爱心被点击后触发爆炸并生成情话文字

（2）爱心气泡动画：

• 在随机位置生成多种颜色多种样式不同大小（32px~64px）的爱心
• 爱心从屏幕底部缓慢上升到顶部，同时旋转360度并逐渐透明
• 限制屏幕内最大爱心数量为30，避免卡顿

（3）随机情话文字：

• 点击爱心时在爆炸位置显示情话
• 从预设的文案中随机选择生成（如：我爱你；遇见你真好....等）
• 随机颜色和字体大小（16px~22px）增强视觉层次

（4）背景特效：

• 使用linear-gradient创建粉色系渐变天空（#ff9a9e → #fad0c4）
• 通过JavaScript动态生成30个随机位置、大小、颜色的圆形星星（div.star）
• 应用twinkle动画让星星闪烁（缩放+透明度变化）

三：完整代码

<!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>
        body {
    
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
        }

        .floating-heart {
    
            position: fixed;
            font-size: 24px;
            z-index: 1000;
            pointer-events: auto; 
            cursor: default; 
            transform: translateY(100vh) rotate(0deg);
            opacity: 0;
            animation: floatHeart linear forwards;
            will-change: transform, opacity;
            transition: transform 0.2s ease, opacity 0.2s ease; 
        }

        @keyframes floatHeart {
    
            0% {
    
                transform: translateY(100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
    
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes burstHeart {
    
            0% {
    
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 1;
            }
            30% {
    
                transform: translate(-50%, -50%) scale(1.8) rotate(180deg);
                opacity: 0.9;
            }
            100% {
    
                transform: translate(-50%, -50%) scale(0) rotate(360deg);
                opacity: 0;
            }
        }

        .love-text {
    
            position: fixed;
            font-size: 18px;
            color: #fff;
            font-family: "Microsoft Yahei", sans-serif;
            text-shadow: 0 0 5px rgba(0,0,0,0.3);
            z-index: 1001;
            pointer-events: none;
            opacity: 0;
            animation: loveTextFade 1s ease forwards;
            transform: translate(-50%, -50%); 
        }

        @keyframes loveTextFade {
    
            0% {
    
                transform: translate(-50%, -50%) scale(0);
                opacity: 1;
            }
            50% {
    
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 1;
            }
            100% {
    
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }
        }
        .star {
    
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
            z-index: 1;
            animation: twinkle infinite;
        }

        @keyframes twinkle {
    
            0%, 100% {
     opacity: 0.3; transform: scale(0.8); }
            50% {
     opacity: 1; transform: scale(1.2); }
        }
    </style>
</head>
<body>
    <div class="bg-animation" id="bgAnimation"></div>

    <script>
        const config = {
    
            bgStarCount: 30,
            maxHeartsOnScreen: 30,
            heartSizeRange: [32, 64],
            animationDurationRange: [8, 15],
            spawnInterval: 500,
            heartSymbols: ['❤️', '💖', '💘', '💝', '💓', '💗', '💕', '💙', '💛', '💜', '💚'],
            heartColors: [
                '#ff69b4', '#ff1493', '#ff4500', '#ffd700', '#ff8c00',
                '#ff6347', '#dc143c', '#c71585', '#ff00ff', '#9370db',
                '#00bfff', '#00fa9a', '#ff7f50', '#ff6eb4', '#ff91a4'
            ],
            loveTexts: [
    "我爱你", "喜欢你", "心动了", "遇见你真好", "满心欢喜",
    "余生都是你", "满眼都是你", "超喜欢你", "你最珍贵", "甜蜜暴击",
    "心有灵犀", "双向奔赴", "温柔以待", "人间理想", "甜度超标",
    "星河万顷都是你", "万物不及你", "为你心动", "浪漫不渝", "岁岁年年",
    "你是我的例外与偏爱", "想和你共度每一个晨昏", "你的笑容是我每日的阳光",
    "遇见你，是我这辈子最美的意外", "我的世界因你而完整", "你是我所有的少女心和英雄梦",
    "想牵你的手，从心动到古稀", "你是我平淡岁月里的心之所向", "我贪恋的人间烟火，不偏不倚全是你",
    "你是我疲惫生活中的温柔梦想", "想和你一起浪费时光，直到时光的尽头", "我的宇宙里，你是最亮的星",
    "你是我漫漫余生里斩钉截铁的梦想", "想和你一起看遍世间风景，然后只与你细水长流",
    "你是我疲惫生活中的唯一解药", "我的喜欢写在风里，从此整个世界都是你",
    "你是我所有温柔与浪漫的源头", "想和你一起虚度短的沉默，长的无意义，一起消磨精致而苍老的宇宙",
    "你是我灵魂的归宿，是我一生的守候", "我的爱意汹涌，看世间万物都浪漫心动",
    "你是我平淡岁月里的星辰大海", "想和你一起走过四季，看遍人间烟火",
    "你是我所有美好与幸运的起点", "我的世界很小，小到只能装下你一个人",
    "你是我疲惫生活中的不期而遇", "想和你一起慢慢变老，直到哪里也去不了"
]

        };

        let activeHearts = 0;
        let allHearts = [];

        function createBackgroundStars() {
    
            const bgAnimation = document.getElementById('bgAnimation');

            for (let i = 0; i < config.bgStarCount; i++) {
    
                const star = document.createElement('div');
                star.className = 'star';
                const size = Math.random() * 3 + 1;
                star.style.width = `${
      size}px`;
                star.style.height = `${
      size}px`;
                star.style.left = `${
      Math.random() * 100}%`;
                star.style.top = `${
      Math.random() * 100}%`;
                star.style.animationDuration = `${
      Math.random() * 3 + 2}s`;
                star.style.animationDelay = `${
      Math.random() * 5}s`;
                star.style.backgroundColor = `hsl(${
      Math.random() * 360}, 80%, 80%)`;

                bgAnimation.appendChild(star);
            }
        }

        function createLoveText(x, y) {
    
            const text = document.createElement('div');
            text.className = 'love-text';
            const randomText = config.loveTexts[Math.floor(Math.random() * config.loveTexts.length)];
            text.innerText = randomText;
            text.style.left = `${
      x}px`;
            text.style.top = `${
      y}px`;
            const randomColor = config.heartColors[Math.floor(Math.random() * config.heartColors.length)];
            text.style.color = randomColor;
            const fontSize = Math.random() * 6 + 16;
            text.style.fontSize = `${
      fontSize}px`;
            document.body.appendChild(text);

            setTimeout(() => {
    
                if (text.parentNode) {
    
                    text.parentNode.removeChild(text);
                }
            }, 1000);
        }

        function handleHeartClick(e) {
    
            const heart = e.target;
            const rect = heart.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            heart.style.animation = 'none';
            heart.style.transition = 'none';
            heart.style.left = `${
      centerX}px`;
            heart.style.top = `${
      centerY}px`;
            heart.style.transform = 'translate(-50%, -50%)';
            heart.style.animation = 'burstHeart 0.5s ease forwards';
            createLoveText(centerX, centerY);

            setTimeout(() => {
    
                if (heart.parentNode) {
    
                    heart.parentNode.removeChild(heart);
                }
                activeHearts = Math.max(0, activeHearts - 1);
                allHearts = allHearts.filter(h => h !== heart);
            }, 500);
        }

        function createHeart() {
    
            if (activeHearts >= config.maxHeartsOnScreen) return;
            activeHearts++;
            const heart = document.createElement('div');
            heart.className = 'floating-heart';
            const randomSymbol = config.heartSymbols[Math.floor(Math.random() * config.heartSymbols.length)];
            heart.innerHTML = randomSymbol;
            const randomColor = config.heartColors[Math.floor(Math.random() * config.heartColors.length)];
            heart.style.color = randomColor;
            const leftPos = Math.random() * (window.innerWidth - 60) + 30;
            heart.style.left = `${
      leftPos}px`;
            const size = Math.random() * (config.heartSizeRange[1] - config.heartSizeRange[0]) + config.heartSizeRange[0];
            heart.style.fontSize = `${
      size}px`;
            const duration = Math.random() * (config.animationDurationRange[1] - config.animationDurationRange[0]) + config.animationDurationRange[0];
            heart.style.animationDuration = `${
      duration}s`;
            const rotationDirection = Math.random() > 0.5 ? 1 : -1;
            heart.style.setProperty('--rotation', `${
      360 * rotationDirection}deg`);
            heart.addEventListener('click', handleHeartClick);
            document.body.appendChild(heart);
            allHearts.push(heart);

            heart.addEventListener('animationend', function(e) {
    
                if (e.animationName === 'floatHeart') {
    
                    if (heart.parentNode) {
    
                        heart.parentNode.removeChild(heart);
                    }
                    activeHearts = Math.max(0, activeHearts - 1);
                    allHearts = allHearts.filter(h => h !== heart);
                }
            });
        }

        function startHeartSpawner() {
    
            for (let i = 0; i < config.maxHeartsOnScreen / 2; i++) {
    
                setTimeout(createHeart, i * config.spawnInterval / 2);
            }

            setInterval(createHeart, config.spawnInterval);
        }

        window.addEventListener('resize', () => {
    
            allHearts.forEach(heart => {
    
                if (heart.parentNode) {
    
                    heart.parentNode.removeChild(heart);
                }
            });

            activeHearts = 0;
            allHearts = [];
            startHeartSpawner();
        });

        window.addEventListener('load', () => {
    
            createBackgroundStars();
            startHeartSpawner();
        });
    </script>
</body>
</html>

四：代码分析

（1）爱心动画模块

        /* 浮动爱心基础样式 */
        .floating-heart {
   
            position: fixed;
            font-size: 24px;
            z-index: 1000;
            pointer-events: auto; /* 允许点击事件 */
            cursor: default; 
            transform: translateY(100vh) rotate(0deg); /* 初始位置在底部 */
            opacity: 0;
            animation: floatHeart linear forwards; /* 应用上升动画 */
            will-change: transform, opacity; /* 优化动画性能 */
            transition: transform 0.2s ease, opacity 0.2s ease; /* 平滑过渡效果 */
        }

        /* 爱心上升动画 */
        @keyframes floatHeart {
   
            0% {
   
                transform: translateY(100vh) rotate(0deg); /* 从底部开始 */
                opacity: 1;
            }
            100% {
   
                transform: translateY(-100px) rotate(360deg); /* 上升到顶部并旋转一圈 */
                opacity: 0; /* 逐渐消失 */
            }
        }

        /* 爱心点击爆炸动画 */
        @keyframes burstHeart {
   
            0% {
   
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 1;
            }
            30% {
   
                transform: translate(-50%, -50%) scale(1.8) rotate(180deg); /* 放大并旋转 */
                opacity: 0.9;
            }
            100% {
   
                transform: translate(-50%, -50%) scale(0) rotate(360deg); /* 缩小消失 */
                opacity: 0;
            }
        }

        /* 爱心文字样式 */
        .love-text {
   
            position: fixed;
            font-size: 18px;
            color: #fff;
            font-family: "Microsoft Yahei", sans-serif;
            text-shadow: 0 0 5px rgba(0,0,0,0.3); /* 文字阴影 */
            z-index: 1001;
            pointer-events: none; /* 禁止点击事件 */
            opacity: 0;
            animation: loveTextFade 1s ease forwards; /* 淡入淡出动画 */
            transform: translate(-50%, -50%); /* 居中定位 */
        }

        /* 文字淡入淡出动画 */
        @keyframes loveTextFade {
   
            0% {
   
                transform: translate(-50%, -50%) scale(0); /* 从缩小开始 */
                opacity: 1;
            }
            50% {
   
                transform: translate(-50%, -50%) scale(1.2); /* 放大效果 */
                opacity: 1;
            }
            100% {
   
                transform: translate(-50%, -50%) scale(0); /* 缩小消失 */
                opacity: 0;
            }
        }

（2）配置对象

        // 配置对象，集中管理所有可配置参数
        const config = {
   
            bgStarCount: 30, // 背景星星数量
            maxHeartsOnScreen: 30, // 屏幕上最大爱心数量
            heartSizeRange: [32, 64], // 爱心大小范围(px)
            animationDurationRange: [8, 15], // 动画持续时间范围(s)
            spawnInterval: 500, // 爱心生成间隔(ms)
            heartSymbols: ['❤️', '💖', '💘', '💝', '💓', '💗', '💕', '💙', '💛', '💜', '💚'], // 爱心符号集合
            heartColors: [ // 爱心颜色集合
                '#ff69b4', '#ff1493', '#ff4500', '#ffd700', '#ff8c00',
                '#ff6347', '#dc143c', '#c71585', '#ff00ff', '#9370db',
                '#00bfff', '#00fa9a', '#ff7f50', '#ff6eb4', '#ff91a4'
            ],
            loveTexts: [ // 点击爱心后显示的文字集合
                "我爱你", "喜欢你", "心动了", "遇见你真好", "满心欢喜",
                "余生都是你", "满眼都是你", "超喜欢你", "你最珍贵", "甜蜜暴击",
                // 更多文字...
            ]
        };

        let activeHearts = 0; // 当前屏幕上活跃的爱心数量
        let allHearts = []; // 存储所有爱心元素的数组

（3）背景星星模块

        function createBackgroundStars() {
   
            const bgAnimation = document.getElementById('bgAnimation');
            for (let i = 0; i < config.bgStarCount; i++) {
   
                const star = document.createElement('div');
                star.className = 'star';
                const size = Math.random() * 3 + 1; // 随机大小(1-4px)
                star.style.width = `${
     size}px`;
                star.style.height = `${
     size}px`;
                star.style.left = `${
     Math.random() * 100}%`; // 随机水平位置
                star.style.top = `${
     Math.random() * 100}%`; // 随机垂直位置
                star.style.animationDuration = `${
     Math.random() * 3 + 2}s`; // 随机动画持续时间
                star.style.animationDelay = `${
     Math.random() * 5}s`; // 随机延迟
                star.style.backgroundColor = `hsl(${
     Math.random() * 360}, 80%, 80%)`; // 随机颜色
                bgAnimation.appendChild(star);
            }
        }

（4）爱心生成模块

        function createHeart() {
   
            if (activeHearts >= config.maxHeartsOnScreen) return; // 达到上限则不创建

            activeHearts++;
            const heart = document.createElement('div');
            heart.className = 'floating-heart';

            // 随机选择爱心符号和颜色
            const randomSymbol = config.heartSymbols[Math.floor(Math.random() * config.heartSymbols.length)];
            heart.innerHTML = randomSymbol;
            const randomColor = config.heartColors[Math.floor(Math.random() * config.heartColors.length)];
            heart.style.color = randomColor;

            // 随机位置和大小
            const leftPos = Math.random() * (window.innerWidth - 60) + 30;
            heart.style.left = `${
     leftPos}px`;
            const size = Math.random() * (config.heartSizeRange[1] - config.heartSizeRange[0]) + config.heartSizeRange[0];
            heart.style.fontSize = `${
     size}px`;

            // 随机动画持续时间
            const duration = Math.random() * (config.animationDurationRange[1] - config.animationDurationRange[0]) + config.animationDurationRange[0];
            heart.style.animationDuration = `${
     duration}s`;

            // 随机旋转方向
            const rotationDirection = Math.random() > 0.5 ? 1 : -1;
            heart.style.setProperty('--rotation', `${
     360 * rotationDirection}deg`);

            // 添加点击事件
            heart.addEventListener('click', handleHeartClick);
            document.body.appendChild(heart);
            allHearts.push(heart);

            // 动画结束后的处理
            heart.addEventListener('animationend', function(e) {
   
                if (e.animationName === 'floatHeart') {
   
                    if (heart.parentNode) {
   
                        heart.parentNode.removeChild(heart);
                    }
                    activeHearts = Math.max(0, activeHearts - 1);
                    allHearts = allHearts.filter(h => h !== heart);
                }
            });
        }

（5）文字显示模块

        function createLoveText(x, y) {
   
            const text = document.createElement('div');
            text.className = 'love-text';
            const randomText = config.loveTexts[Math.floor(Math.random() * config.loveTexts.length)];
            text.innerText = randomText;
            text.style.left = `${
     x}px`;
            text.style.top = `${
     y}px`;
            const randomColor = config.heartColors[Math.floor(Math.random() * config.heartColors.length)];
            text.style.color = randomColor;
            const fontSize = Math.random() * 6 + 16; // 随机字体大小(16-22px)
            text.style.fontSize = `${
     fontSize}px`;
            document.body.appendChild(text);

            // 1秒后自动移除文字元素
            setTimeout(() => {
   
                if (text.parentNode) {
   
                    text.parentNode.removeChild(text);
                }
            }, 1000);
        }

（6）点击交互模块

        function handleHeartClick(e) {
   
            const heart = e.target;
            const rect = heart.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;

            // 重置样式为爆炸动画做准备
            heart.style.animation = 'none';
            heart.style.transition = 'none';
            heart.style.left = `${
     centerX}px`;
            heart.style.top = `${
     centerY}px`;
            heart.style.transform = 'translate(-50%, -50%)';
            heart.style.animation = 'burstHeart 0.5s ease forwards'; // 应用爆炸动画

            // 在爱心位置创建文字
            createLoveText(centerX, centerY);

            // 动画结束后移除爱心元素
            setTimeout(() => {
   
                if (heart.parentNode) {
   
                    heart.parentNode.removeChild(heart);
                }
                activeHearts = Math.max(0, activeHearts - 1);
                allHearts = allHearts.filter(h => h !== heart);
            }, 500);
        }