HTML5制作：粉色爱心与蓝色文字动画_爱心动画html程序以下是一个完整的html文件,包含满屏闪烁发光的粉色爱心动画-优快云博客

本文链接：https://blog.youkuaiyun.com/LSYLOVEJAVA/article/details/148406814

粉色爱心与蓝色文字动画

一个充满粉色爱心动画并在中央显示"ILOVEU"文字的HTML页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心动画 - I LOVE U</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #000;
            overflow: hidden;
            height: 100vh;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .love-text {
            position: absolute;
            color: #7ec0ee;
            font-size: 5rem;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(126, 192, 238, 0.7);
            animation: pulse 2s infinite;
            z-index: 10;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .heart {
            position: absolute;
            pointer-events: none;
            animation: float 8s ease-in-out infinite;
            opacity: 0.8;
        }
        
        .heart svg {
            filter: drop-shadow(0 0 5px rgba(255, 105, 180, 0.7));
        }
        
        .heart::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0;
            animation: sparkle 2s infinite;
        }
        
        @keyframes sparkle {
            0%, 100% { opacity: 0; transform: scale(0.5); }
            50% { opacity: 1; }
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateX(25px) rotate(5deg); }
            50% { transform: translateY(-20px) rotate(0deg); }
            75% { transform: translateX(-25px) rotate(-5deg); }
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.7; filter: brightness(0.9); }
            50% { opacity: 1; filter: brightness(1.5); }
        }
        
        .heart:nth-child(4n) {
            animation-duration: 12s;
            animation-delay: 0s;
        }
        
        .heart:nth-child(4n+1) {
            animation-duration: 10s;
            animation-delay: 2s;
        }
        
        .heart:nth-child(4n+2) {
            animation-duration: 8s;
            animation-delay: 1s;
        }
        
        .heart:nth-child(4n+3) {
            animation-duration: 11s;
            animation-delay: 3s;
        }
    </style>
</head>
<body>
    <div class="love-text">I LOVE U</div>
    
    <script>
        // 创建爱心元素
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            
            // 随机大小
            const size = Math.random() * 30 + 15;
            
            // 随机位置
            const x = Math.random() * window.innerWidth;
            const y = Math.random() * window.innerHeight;
            
            // 随机旋转
            const rotate = Math.random() * 20 - 10;
            
            // 随机动画延迟
            const delay = Math.random() * 5;
            
            // 随机闪烁动画
            const twinkleDuration = Math.random() * 2 + 1;
            
            // 设置样式
            heart.style.left = `${x}px`;
            heart.style.top = `${y}px`;
            heart.style.transform = `rotate(${rotate}deg)`;
            heart.style.animationDelay = `${delay}s`;
            heart.style.animation = `float ${8 + Math.random() * 4}s ease-in-out infinite, 
                                     twinkle ${twinkleDuration}s ease-in-out ${delay}s infinite`;
            
            // 创建SVG爱心
            heart.innerHTML = `
                <svg width="${size}" height="${size}" viewBox="0 0 100 100">
                    <path d="M50,30 
                             C30,10 0,20 0,50 
                             C0,80 50,90 50,90 
                             C50,90 100,80 100,50 
                             C100,20 70,10 50,30 Z" 
                          fill="#ff69b4" />
                </svg>
            `;
            
            document.body.appendChild(heart);
            
            // 15秒后移除爱心
            setTimeout(() => {
                if (heart.parentNode) {
                    heart.remove();
                }
            }, 15000);
        }
        
        // 初始创建100个爱心
        for (let i = 0; i < 100; i++) {
            createHeart();
        }
        
        // 每隔100毫秒创建一个新爱心
        setInterval(createHeart, 100);
    </script>
</body>
</html>

功能说明

满屏粉色爱心动画:
- 使用SVG绘制粉色爱心，并应用闪烁发光效果
- 每个爱心有不同的浮动轨迹，模拟自然飘动
- 添加发光特效，营造浪漫氛围
中央文字效果:
- "I LOVE U"居中显示，使用浅蓝色调
- 文字具有脉冲动画效果（呼吸效果）
- 添加发光阴影，增强视觉效果
动画特性:
- 爱心有不同的漂浮轨迹和速度
- 爱心的发光效果会随机闪烁
- 新爱心不断生成，保持满屏效果

使用说明

复制上述代码到文本编辑器
保存为HTML文件（如love-animation.html）
在浏览器中打开该文件

您会立即看到满屏闪烁的粉色爱心，同时在画面中央呈现浅蓝色的"I LOVE U"文字动画效果。

这个动画适合用于浪漫告白、情人节惊喜，或者作为任何需要表达爱意的场景的背景效果。