要实现一个爱心逐渐放大再缩小的循环特效，你可以使用HTML、CSS和JavaScript。以下是一个简单的实现：
- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心动画</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="heart" class="heart"></div>
<script src="script.js"></script>
</body>
</html>
- CSS (
styles.css):
.heart {
position: relative;
width: 100px;
height: 90px;
background: red;
transform: scale(1);
transition: transform 1s ease-in-out;
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);
}
.heart.enlarged {
transform: scale(1.2);
}
.heart.shrunk {
transform: scale(0.8);
}
注意：clip-path 用于创建一个简单的爱心形状。你可以根据需要调整它或使用更复杂的SVG路径来创建一个更逼真的爱心形状。
3. JavaScript (script.js):
document.addEventListener('DOMContentLoaded', function() {
const heart = document.getElementById('heart');
let isEnlarged = false;
let isShrunk = false;
setInterval(() => {
if (!isEnlarged) {
heart.classList.add('enlarged');
isEnlarged = true;
isShrunk = false;
} else if (!isShrunk) {
heart.classList.remove('enlarged');
heart.classList.add('shrunk');
isEnlarged = false;
isShrunk = true;
} else {
heart.classList.remove('shrunk');
isShrunk = false;
}
}, 1000); // 每秒变化一次
});
这个简单的示例使用了CSS的transform: scale()来改变爱心的大小，并通过JavaScript来循环添加和删除CSS类，从而实现放大和缩小的效果。你可以根据需要调整动画的持续时间、放大和缩小的比例等。