要使用HTML、CSS和JavaScript绘制一个全屏且较大的爱心，并且让它有动态效果，可以通过以下步骤实现：

在这里插入图片描述

HTML: 定义基本的页面结构。
CSS: 定义爱心的样式和动画效果。
JavaScript: 动态调整爱心的位置和大小，使其在页面上移动。
下面是完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心动星空 - 跳动的爱心</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #000;
            overflow: hidden;
            background-image: radial-gradient(circle at center, #0f0c29 0%, #302b63 100%);
        }

        .heart {
            position: absolute;
            width: 500px;
            height: 500px;
            animation: beat 2s infinite;
            animation-timing-function: ease-in-out;
        }

        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 250px;
            top: 0;
            width: 250px;
            height: 400px;
            background: linear-gradient(45deg, #ff0099, #493240);
            border-radius: 400px 400px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }

        .heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        @keyframes beat {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        .shooting-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
            animation: shooting-star 5s infinite linear;
        }

        @keyframes shooting-star {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%);
            }
            10% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translate(150%, 150%);
            }
        }
    </style>
</head>
<body>
    <div class="heart"></div>

    <script>
        const heart = document.querySelector('.heart');
        let posX = 0;
        let posY = 0;
        let posXIncrement = 1;
        let posYIncrement = 1;

        function moveHeart() {
            posX += posXIncrement;
            posY += posYIncrement;

            if (posX > window.innerWidth / 2 - 250 || posX < 0) {
                posXIncrement *= -1;
            }
            if (posY > window.innerHeight / 2 - 250 || posY < 0) {
                posYIncrement *= -1;
            }

            heart.style.transform = `translate(${posX}px, ${posY}px)`;
            requestAnimationFrame(moveHeart);
        }

        moveHeart();

        // Create shooting stars
        const numberOfStars = 50;
        for (let i = 0; i < numberOfStars; i++) {
            const star = document.createElement('div');
            star.classList.add('shooting-star');
            star.style.animationDuration = `${Math.random() * 3 + 2}s`;
            star.style.animationDelay = `-${Math.random() * 5}s`;
            star.style.left = `${Math.random() * 100}%`;
            star.style.top = `${Math.random() * 100}%`;
            star.style.width = `${Math.random() * 2 + 1}px`;
            star.style.height = `${Math.random() * 2 + 1}px`;
            star.style.animationTimingFunction = `linear`;
            document.body.appendChild(star);
        }
    </script>
</body>
</html>

代码解释

  1. CSS:

    • 背景色设置为深蓝色渐变，模拟星空。
    • .heart的尺寸增加到500px，颜色使用渐变色，从粉红色到深红色。
    • 添加了一个.shooting-star类，用于创建流星效果。流星从屏幕的一边出现，移动到另一边消失。
    • @keyframes shooting-star定义了流星的动画效果，使其从完全透明到不透明，然后再次变得透明，并在屏幕上移动。

  2. JavaScript:

    • 定义了moveHeart函数，使爱心在屏幕上移动。
    • 创建了50个流星元素，每个流星的动画持续时间、延迟、位置和大小都是随机的，增加了动态效果。

你可以将这段代码保存为.html文件，并在浏览器中打开，就可以看到效果了。

# 前端 # css
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区