跳动的爱 - 动态全屏爱心【前端版本】

要使用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 starsconst 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>

代码解释

CSS:
- 背景色设置为深蓝色渐变，模拟星空。
- .heart的尺寸增加到500px，颜色使用渐变色，从粉红色到深红色。
- 添加了一个.shooting-star类，用于创建流星效果。流星从屏幕的一边出现，移动到另一边消失。
- @keyframes shooting-star定义了流星的动画效果，使其从完全透明到不透明，然后再次变得透明，并在屏幕上移动。
JavaScript:
- 定义了moveHeart函数，使爱心在屏幕上移动。
- 创建了50个流星元素，每个流星的动画持续时间、延迟、位置和大小都是随机的，增加了动态效果。