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;

  }

}