多种绚丽爱心效果的前端实现代码合集

最新推荐文章于 2025-07-31 15:38:52 发布

微风怎知我意

最新推荐文章于 2025-07-31 15:38:52 发布

阅读量167

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/LFB050409/article/details/149771331

本文有5 种不同风格的爱心实现方案，包括静态基础款、动态动画款、渐变色彩款、粒子特效款和 3D 立体款，代码简洁易懂，可直接复用。

1. 纯 CSS 静态爱心（基础款）

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .heart {
            width: 100px;
            height: 100px;
            background-color: #ff3864;
            position: relative;
            transform: rotate(45deg);
            margin: 50px auto;
        }
        .heart::before, .heart::after {
            content: '';
            width: 100px;
            height: 100px;
            background-color: #ff3864;
            border-radius: 50%;
            position: absolute;
        }
        .heart::before {
            top: -50px;
            left: 0;
        }
        .heart::after {
            top: 0;
            left: -50px;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
</body>
</html>

效果说明：通过 CSS 伪元素实现经典爱心形状，纯静态展示，颜色鲜艳，是爱心效果的基础形态。

2. 跳动动画爱心（动态款）

<style>
    .pulse-heart {
        width: 100px;
        height: 100px;
        background: #ff416c;
        position: relative;
        transform: rotate(45deg);
        margin: 50px auto;
        animation: pulse 1s infinite;
    }
    .pulse-heart::before, .pulse-heart::after {
        content: '';
        width: 100px;
        height: 100px;
        background: #ff416c;
        border-radius: 50%;
        position: absolute;
    }
    .pulse-heart::before {
        top: -50px;
        left: 0;
    }
    .pulse-heart::after {
        top: 0;
        left: -50px;
    }
    @keyframes pulse {
        0% { transform: rotate(45deg) scale(1); }
        10% { transform: rotate(45deg) scale(1.1); }
        20% { transform: rotate(45deg) scale(0.9); }
        30% { transform: rotate(45deg) scale(1.2); }
        40% { transform: rotate(45deg) scale(0.8); }
        50% { transform: rotate(45deg) scale(1.1); }
        60% { transform: rotate(45deg) scale(0.95); }
        70% { transform: rotate(45deg) scale(1.05); }
        80% { transform: rotate(45deg) scale(0.98); }
        90% { transform: rotate(45deg) scale(1.02); }
        100% { transform: rotate(45deg) scale(1); }
    }
</style>
<div class="pulse-heart"></div>

效果说明：在静态爱心基础上添加脉冲动画，模拟心跳效果，通过 keyframes 控制缩放变化。

3. 渐变色彩爱心

<style>
    .gradient-heart {
        width: 120px;
        height: 120px;
        position: relative;
        transform: rotate(45deg);
        margin: 50px auto;
        background: linear-gradient(45deg, #ff3864, #ff9dcf, #ff3864);
        animation: gradientChange 3s infinite;
    }
    .gradient-heart::before, .gradient-heart::after {
        content: '';
        width: 120px;
        height: 120px;
        border-radius: 50%;
        position: absolute;
        background: linear-gradient(45deg, #ff3864, #ff9dcf, #ff3864);
        animation: gradientChange 3s infinite;
    }
    .gradient-heart::before {
        top: -60px;
        left: 0;
    }
    .gradient-heart::after {
        top: 0;
        left: -60px;
    }
    @keyframes gradientChange {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
</style>
<div class="gradient-heart"></div>

效果说明：采用渐变色填充，并添加背景位置动画，使爱心颜色呈现流动渐变效果，视觉更绚丽。

4. 粒子飘散爱心（JavaScript 实现）

<canvas id="particleHeart" width="400" height="400"></canvas>
<script>
    const canvas = document.getElementById('particleHeart');
    const ctx = canvas.getContext('2d');
    const particles = [];
    const heartPoints = [];

    // 生成爱心形状的点集
    for (let t = 0; t < Math.PI * 2; t += 0.01) {
        const x = 16 * Math.pow(Math.sin(t), 3);
        const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
        heartPoints.push({ x: x * 8 + 200, y: -y * 8 + 200 }); // 缩放并居中
    }

    // 初始化粒子
    for (let i = 0; i < 300; i++) {
        const p = heartPoints[Math.floor(Math.random() * heartPoints.length)];
        particles.push({
            x: p.x,
            y: p.y,
            size: Math.random() * 2 + 1,
            color: `rgba(255, ${56 + Math.random() * 200}, ${100 + Math.random() * 155}, 0.8)`,
            speed: Math.random() * 0.5 + 0.2,
            targetX: p.x,
            targetY: p.y,
            offsetX: Math.random() * 40 - 20,
            offsetY: Math.random() * 40 - 20,
            phase: Math.random() * Math.PI * 2
        });
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(particle => {
            // 让粒子围绕目标点轻微摆动
            particle.phase += 0.02;
            particle.x = particle.targetX + Math.sin(particle.phase) * particle.offsetX * 0.3;
            particle.y = particle.targetY + Math.cos(particle.phase) * particle.offsetY * 0.3;

            // 绘制粒子
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            ctx.fillStyle = particle.color;
            ctx.fill();
        });
        requestAnimationFrame(draw);
    }

    draw();
</script>

效果说明：通过 Canvas 绘制由大量粒子组成的爱心，粒子会围绕爱心轮廓轻微摆动，呈现灵动的飘散效果，颜色随机分布更显绚丽。

5. 3D 旋转爱心

<style>
    .container-3d {
        perspective: 1000px;
        margin: 100px auto;
        width: 200px;
        height: 200px;
    }
    .heart-3d {
        width: 150px;
        height: 150px;
        position: relative;
        transform-style: preserve-3d;
        animation: rotate 10s infinite linear;
    }
    .heart-face {
        position: absolute;
        width: 150px;
        height: 150px;
        background: linear-gradient(45deg, #ff3864, #ff6b9b);
        transform: rotate(45deg);
    }
    .heart-face::before, .heart-face::after {
        content: '';
        width: 150px;
        height: 150px;
        border-radius: 50%;
        position: absolute;
        background: linear-gradient(45deg, #ff3864, #ff6b9b);
    }
    .heart-face::before {
        top: -75px;
        left: 0;
    }
    .heart-face::after {
        top: 0;
        left: -75px;
    }
    .heart-face.front { transform: rotateY(0deg) translateZ(75px) rotate(45deg); }
    .heart-face.back { transform: rotateY(180deg) translateZ(75px) rotate(45deg); }
    .heart-face.left { transform: rotateY(-90deg) translateZ(75px) rotate(45deg); }
    .heart-face.right { transform: rotateY(90deg) translateZ(75px) rotate(45deg); }
    @keyframes rotate {
        0% { transform: rotateY(0deg) rotateX(0deg); }
        100% { transform: rotateY(360deg) rotateX(360deg); }
    }
</style>
<div class="container-3d">
    <div class="heart-3d">
        <div class="heart-face front"></div>
        <div class="heart-face back"></div>
        <div class="heart-face left"></div>
        <div class="heart-face right"></div>
    </div>
</div>

效果说明：利用 CSS 3D 变换创建立体爱心，通过多面组合和旋转动画，实现 360 度旋转效果，呈现强烈的空间立体感。