html网页做的动态爱心（超好看）

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

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

　　html网页做的动态爱心（超好看）

HTML制作超好看的动态爱心效果

想打造一个浪漫又吸睛的动态爱心网页吗？ HTML、CSS 和 JavaScript 这三剑客就能帮你实现！

一、基础结构

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 元素将作为爱心的容器。

二、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: 定义爱心样式，包括大小、颜色、形状和动画。

三、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;
  }
}