2024年4月14日发(作者：)
以下是一个简单的CSS和JavaScript实现的爱心动画效果：
HTML:
html
CSS:
css
#heart {
position: relative;
width: 100px;
height: 90px;
background: red;
transform: rotate(45deg);
margin: 50px 30px;
}
#heart::before, #heart::after {
content: "";
position: absolute;
top: 40px;
width: 52px;
height: 80px;
border-radius: 50px 50px 0 0;
background: red;
}
#heart::before {
left: 50px;
transform: rotate(-45deg);
}
#heart::after {
left: 0;
transform: rotate(45deg);
}
JavaScript:
javascript
let scale = 1;
const speed = 0.1;
const heart = mentById("heart");
function animate() {
if (scale > 1.2 || scale < 0.8) {
speed *= -1; // 反转速度方向，使爱心逐渐放大或缩小。
} else {
speed = 0; // 当爱心大小稳定时，停止动画。
}
scale += speed; // 更新爱心大小。
orm = `scale(${scale})`; // 应用更新后的爱心大小。
requestAnimationFrame(animate); // 循环调用animate函数，实现动画效果。
}
animate(); // 启动动画。
发布者：admin，转转请注明出处：http://www.yc00.com/web/1713075412a2177977.html
评论列表（0条）