代码实现一个爱心逐渐放大再缩小的循环的特效

要实现一个爱心逐渐放大再缩小的循环特效，你可以使用HTML、CSS和JavaScript。以下是一个简单的实现：

  1. 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>
  1. 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类，从而实现放大和缩小的效果。你可以根据需要调整动画的持续时间、放大和缩小的比例等。

posted @ 2024-12-18 11:26  王铁柱6  阅读(57)  评论(0)    收藏  举报