HTML动态爱心代码爱心满屏

当前位置：电视猫 > HTML/Xhtml>

电视猫时间： 2024-08-18 14:45:51

　　HTML动态爱心代码爱心满屏

HTML制作满屏动态爱心效果

1. HTML结构

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>浪漫爱心</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="heart-container"></div>
  <script src="script.js"></script>
</body>
</html>

heart-container 这个div元素将作为爱心的容器。

2. CSS样式 (style.css)

CSS

body {
  margin: 0;
  overflow: hidden;
  background: #f0f0f0;
}

.heart-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heart {
  position: absolute;
  width: 30px;
  height: 30px;
  background: red;
  border-radius: 50%;
  animation: float 3s infinite ease-in-out;
}

body: 设置背景色，隐藏滚动条。
heart-container: 设置为固定定位，占据整个屏幕。
heart: 定义爱心样式，包括大小、颜色、形状和动画。

3. JavaScript代码 (script.js)

JavaScript

const heartContainer = document.querySelector('.heart-container');

function createHeart() {
  const heart = document.createElement('div');
  heart.classList.add('heart');
  heart.style.left = Math.random() * 100 + '%';
  heart.style.top = Math.random() * 100 + '%';
  he   artContainer.appendChild(heart);
}

// 创建多个爱心
for (let i = 0; i < 100; i++) {
  createHeart();
}

@keyframes float {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}

createHeart: 创建一个爱心元素，随机设置位置。
动画: 使用 CSS 的 @keyframes 定义爱心飘动的动画。

代码解读

HTML: 创建一个空的容器，用于存放生成的爱心元素。
CSS: 定义了整个页面的样式，包括背景色、爱心的大小、形状和动画。
JavaScript:
- 获取到爱心容器。
- 定义一个函数 createHeart，用于创建一个爱心元素，并随机设置其位置。
- 通过循环调用 createHeart 函数，生成多个爱心。
- 使用 CSS 的 @keyframes 定义一个动画，让爱心从上往下飘动，并逐渐消失。