粒子爱心代码怎么敲太普通了
以下是一个简单的粒子爱心代码,使用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 著作权归作者所有。请勿转载和采集!