HTML心形动态满屏爱心代码

HTML心形动态满屏爱心代码通常是用CSS3和JavaScript实现的。以下是一个示例代码：

HTML部分：

<div class="heartBox">
  <div class="heart"></div>
</div>

CSS部分：

.heartBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f6f6f6;
}

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-10px;
  margin-top: -10px;
  transform-origin: center bottom 0;
  animation: heartBeat 0.7s ease-in-out infinite;
}

.heart::before,
.heart::after {
  position: absolute;
  content: "";
  left: 0;
  width: inherit;
  height: inherit;
  background-color: #f00;
  border-radius: 50% 50% 0 0;
  transform: rotate(-45deg);
}

.heart::before {
  top: -50%;
}

.heart::after {
  left: 50%;
}

@keyframes heartBeat {
  from {
    transform: scale(1) rotate(-45deg);
  }
  
  to {
    transform: scale(0.6) rotate(-45deg);
  }
}

JavaScript部分：

// 创建爱心
function createHeart() {
    const heart = document.createElement('div');
    heart.className = 'heart';
    document.querySelector('.heartBox').appendChild(heart);
    // 随机位置
    const randX = Math.floor(Math.random() * window.innerWidth);
    heart.style.left = `${randX}px`;
    // 动画结束后删除节点
    heart.addEventListener('animationend', () => {
        heart.remove();
    });
}

// 定时创建爱心
setInterval(() => {
    createHeart();
}, 300);