SVG 绘制爱心

2025-05-20

爱心
html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 绘制爱心</title>
    <style>
        body {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            min-height: 100vh; /* 确保容器高度为视口高度 */
            margin: 0; /* 移除默认边距 */
            background-color: #f0f0f0; /* 设置背景色 */
        }
        svg {
            width: 300px; /* 调整 SVG 大小 */
            height: 300px;
            fill: #ff4d4d; /* 更柔和的红色 */
            animation: heartbeat 1.5s ease-in-out infinite; /* 添加心跳动画 */
        }

        /* 定义心跳动画 */
        @keyframes heartbeat {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2); /* 放大 20% */
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
<!-- 优化后的 SVG 路径 -->
<svg viewBox="0 0 24 24">
    <path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12z"/>
</svg>
</body>
</html>

<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: #0a0a1a;
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 100vw;
            height: 100vh;
        }

        /* 粒子系统 */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 0 10px rgba(255,80,80,0.2));
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            mix-blend-mode: screen;
            transition: transform 0.8s ease-out;
        }

        /* 动画定义 */
        @keyframes particle-flow {
            0% { transform: translate(0,0); opacity: 0.8; }
            50% { transform: translate(var(--tx), var(--ty)); opacity: 0.4; }
            100% { transform: translate(0,0); opacity: 0.8; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="particles"></div>
</div>

<script>
    // 配置参数
    const config = {
        totalParticles: 3000,   // 增加粒子数量
        baseRadius: 300,        // 基础半径
        colorRange: ['#ff6666', '#ff9999', '#ffcccc']
    };

    // 心形极坐标方程
    function heartShape(theta) {
        return config.baseRadius * (1 - Math.sin(theta));
    }

    // 创建粒子系统
    function createParticles() {
        const container = document.querySelector('.particles');

        for(let i = 0; i < config.totalParticles; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';

            // 基础位置参数
            const theta = Math.random() * Math.PI * 2;
            const radius = heartShape(theta);
            const baseX = radius * Math.cos(theta);
            const baseY = radius * Math.sin(theta);

            // 调整心形的方向
            const adjustedX = baseX;
            const adjustedY = -baseY;

            // 动态参数
            const size = 1 + Math.random() * 3;
            const color = config.colorRange[Math.floor(Math.random()*3)];
            const tx = (Math.random() - 0.5) * 80; // 增加运动幅度
            const ty = (Math.random() - 0.5) * 80;

            particle.style.cssText = `
                    width: ${size}px;
                    height: ${size}px;
                    background: ${color};
                    opacity: ${0.6 + Math.random()*0.3};
                    left: ${50 + adjustedX/1500*100}%;
                    top: ${50 + adjustedY/1500*100}%;
                    --tx: ${tx}px;
                    --ty: ${ty}px;
                    animation: particle-flow ${8 + Math.random()*4}s ease-in-out infinite;
                    animation-delay: ${Math.random()*5}s;
                `;

            container.appendChild(particle);
        }
    }

    // 初始化
    createParticles();
</script>
</body>
</html>