当前位置：首页 > article >正文

html、js、css实现爱心效果

article 2025/1/23 22:17:03

好的！我们可以进一步美化这个爱心效果，增加更多动态和视觉吸引力。以下是改进后的代码，包括以下功能：

1. 背景渐变：添加动态背景渐变效果。
2. 爱心阴影：为爱心添加阴影，使其更具立体感。
3. 随机颜色：点击时随机切换颜色，而不是固定顺序。
4. 文字提示：在爱心下方添加文字提示，告诉用户可以点击切换颜色。

---

### 美化后的代码

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跳动爱心</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      animation: bgAnimation 10s infinite alternate;
    }

    @keyframes bgAnimation {
      0% {
        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
      }
      50% {
        background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
      }
      100% {
        background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
      }
    }

    .heart-container {
      text-align: center;
    }

    .heart {
      width: 100px;
      height: 90px;
      position: relative;
      animation: beat 1s infinite;
      filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.7));
    }

    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
      top: 0;
      width: 52px;
      height: 80px;
      background-color: var(--heart-color, red);
      border-radius: 50px 50px 0 0;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    }

    .heart::before {
      left: 50px;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }

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

    @keyframes beat {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .text {
      margin-top: 20px;
      font-size: 18px;
      color: #fff;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div class="heart-container">
    <div class="heart" id="heart"></div>
    <div class="text">点击爱心切换颜色 ❤️</div>
  </div>

  <script>
    const heart = document.getElementById('heart');

    // 随机颜色函数
    const getRandomColor = () => {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    };

    // 点击切换颜色
    heart.addEventListener('click', () => {
      const randomColor = getRandomColor();
      heart.style.setProperty('--heart-color', randomColor);
    });

    // 初始化颜色
    heart.style.setProperty('--heart-color', getRandomColor());
  </script>
</body>
</html>
```

---

新增功能说明

1. 背景渐变动画：
- 使用 `linear-gradient` 创建背景渐变效果。
- 通过 `@keyframes` 实现背景颜色的动态变化。

2. 爱心阴影：
- 使用 `filter: drop-shadow()` 为爱心添加阴影，使其更具立体感。

3. 随机颜色切换：
- 点击爱心时，使用 `getRandomColor()` 函数生成随机颜色，并应用到爱心上。

4. 文字提示：
- 在爱心下方添加文字提示，告诉用户可以点击切换颜色。

---

运行效果

1. 打开浏览器，运行代码。
2. 你会看到一个跳动的爱心，背景颜色会动态变化。
3. 点击爱心，颜色会随机切换。
4. 爱心下方会显示提示文字：“点击爱心切换颜色 ❤️”。

---

希望这个美化后的版本能满足你的需求！如果还有其他想法或需要进一步调整，请随时告诉我！ 😊

查看全文

http://www.kler.cn/a/515463.html