以下是一个简单的粒子爱心代码,使用HTML、CSS和JavaScript编写:

HTML:

<div id="heart"></div>

CSS:

#heart {
  position: relative;
  width: 50px;
  height: 50px;
  animation: pulse 1s infinite;
}

#heart:before,
#heart:after {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 25px 25px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

#heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

JavaScript:

// 创建粒子对象
function createParticle() {
  const particle = document.createElement("div");
  particle.className = "particle";
  particle.style.left = Math.random() * 100 + "%";
  particle.style.animationDuration = Math.random() * 2 + 1 + "s";
  document.getElementById("heart").appendChild(particle);
  // 等动画结束后删除粒子对象
  setTimeout(() => {
    particle.remove();
  }, 3000);
}

// 定时创建粒子对象
setInterval(() => {
  createParticle();
}, 100);

// 心形脉动动画
const pulse = `
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
`;
document.styleSheets[0].insertRule(pulse);

在浏览器中运行以上代码,即可看到一个粒子爱心效果

粒子爱心代码怎么敲太普通了

原文地址: https://www.cveoy.top/t/topic/c0Gb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录