爱心

找Bug

发布于 2025-03-27 17:44:20

6900

代码可运行

文章被收录于专栏：你的Bug我做主你的Bug我做主

运行总次数：0

代码可运行

想浪漫一点吗，今天教大家用前端编写一个爱心，就用简单的HTML、CSS和 JavaScript，创造一个简洁而浪漫的动画效果

下面介绍一下主要的部分代码

HTML部分

首先我们在 body 标签内创建了一个爱心 div 元素，点击该元素会触发 showLove() 函数。

<div class="heart" onclick="showLove()"></div>

CSS部分

我们用 @keyframes 创建了两个动画，一个是爱心的跳动动画 beat，另一个是文字的淡化消失动画 fadeOut。

@keyframes beat {
    0%, 100% {
        transform: scale(1) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(-45deg);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

JavaScript部分

点击爱心时，showLove() 函数会随机生成一段文字，并将其显示在页面上的随机位置。文字的样式（如颜色和字体大小）会根据随机数值进行设置。文字将在2秒后通过 fadeOut 动画逐渐消失。

function showLove() {
    const messages = ["我❤️你", "爱你如初", "你是我的唯一", "心动的感觉", "一生一世", "甜蜜时光", "心心相印", "情深意长", "永不分离"];
    const text = document.createElement("div");
    text.className = "text";
    text.innerText = messages[Math.floor(Math.random() * messages.length)];
    document.body.appendChild(text);

    const x = Math.random() * (window.innerWidth - 100);
    const y = Math.random() * (window.innerHeight - 50);
    text.style.left = `${x}px`;
    text.style.top = `${y}px`;
    text.style.display = "block";

    text.style.fontSize = `${Math.random() * 20 + 20}px`;
    text.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;

    setTimeout(() => {
        text.remove();
    }, 2000);
}

完整版代码如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳动的爱心</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #ffe6e6;
            margin: 0;
            font-family: Arial, sans-serif;
            position: relative;
            overflow: hidden;
        }
        .heart {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(-45deg);
            animation: beat 1s infinite;
            cursor: pointer;
        }
        .heart:before, .heart:after {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
        .heart:before {
            top: -50px;
            left: 0;
        }
        .heart:after {
            top: 0;
            left: 50px;
        }
        @keyframes beat {
            0%, 100% {
                transform: scale(1) rotate(-45deg);
            }
            50% {
                transform: scale(1.2) rotate(-45deg);
            }
        }
        .text {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color: #ff4081;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            display: none;
            opacity: 1;
            animation: fadeOut 2s forwards;
        }
        @keyframes fadeOut {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="heart" onclick="showLove()"></div>
    <script>
        function showLove() {
            const messages = ["我❤️你", "爱你如初", "你是我的唯一", "心动的感觉", "一生一世", "甜蜜时光", "心心相印", "情深意长", "永不分离"];
            const text = document.createElement("div");
            text.className = "text";
            text.innerText = messages[Math.floor(Math.random() * messages.length)];
            document.body.appendChild(text);

            // 随机位置
            const x = Math.random() * (window.innerWidth - 100);
            const y = Math.random() * (window.innerHeight - 50);
            text.style.left = `${x}px`;
            text.style.top = `${y}px`;
            text.style.display = "block";

            // 文字样式变化
            text.style.fontSize = `${Math.random() * 20 + 20}px`;
            text.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`;

            // 2秒后文字渐变消失
            setTimeout(() => {
                text.remove();
            }, 2000);
        }
    </script>
</body>
</html>

通过这段代码，我们能够实现一个简单而又充满浪漫氛围的前端动画效果。无论是单纯的跳动爱心，还是带有淡化消失效果的情感文字，都能带给用户一种愉悦的互动体验。这个小小的互动效果，不仅可以应用在情人节或者纪念日等浪漫场合，还可以作为一种有趣的前端小技巧，增强网页的动态效果和用户参与感。

下面是显示效果