<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ハートエモーション</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
        }

        span {
            position: absolute;
            color: red;
            font-size: x-large;
            transform: rotate(45deg);
            animation: heart 2s ease-in-out infinite;
            cursor: default;
        }

        @keyframes heart {
            0% {
                opacity: 0;
                transform: rotate(-45deg) scale(1);
            }

            10% {
                opacity: 1;
                transform: rotate(-45deg) scale(0.8);
            }

            30% {
                opacity: 1;
                transform: rotate(-45deg) scale(0.9);
            }

            50% {
                opacity: 1;
                transform: rotate(-45deg) scale(1);
            }

            80% {
                opacity: 1;
                transform: rotate(-45deg) scale(0.9);
            }

            100% {
                opacity: 0;
                transform: rotate(-45deg) scale(1);
            }
        }
    </style>
</head>
<body>
<script>
    const heartText = "&#x2764;&#xFE0F;";
    const sizeList = ["x-small", "small", "medium", "large", "x-large", "xx-large"];
    const colorList = ["#e53935", "#d81b60", "#8e24aa", "#5e35b1", "#3949ab", "#1e88e5", "#039be5", "#00acc1", "#00897b", "#43a047", "#7cb342", "#c0ca33", "#ffb900", "#f4511e", "#6d4c41", "#546e7a"];

    function createHeart() {
        const heart = document.createElement("span");
        heart.innerHTML = heartText;
        heart.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
        heart.style.top = Math.floor(Math.random() * window.innerHeight) + "px";
        heart.style.fontSize = sizeList[Math.floor(Math.random() * sizeList.length)];
        heart.style.color = colorList[Math.floor(Math.random() * colorList.length)];
        document.body.appendChild(heart);
        setTimeout(() => document.body.removeChild(heart),
            Math.floor(Math.random() * 3000) + 1000);
    }

    setInterval(createHeart, 200);
</script>
</body>
</html>

// ジョーク：Q:ねこが舌を出す理由は何ですか？ A:熱中症を防ぐためです。