爱心破碎的html动画效果

最新推荐文章于 2024-07-12 20:49:16 发布

仙道964

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量116

点赞数

分类专栏： html 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_75190682/article/details/133360604

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>红色爱心破碎效果</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .heart {
      font-size: 600px;
      color: red;
      transition: all 1s ease-in-out;
    }

    .shattered-heart {
      font-size: 400px;
      color: red;
      display: inline-block;
      position: relative;
      transform: rotate(-45deg);
      transition: all 1s ease-in-out;
    }
  </style>
</head>
<body>
<div id="heart" class="heart">&#10084;&#65039;</div>

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

  function playMusic() {
    heart.classList.remove('heart');
    heart.classList.add('shattered-heart');
    heart.innerHTML = '&#128148;';  // Change to broken heart
    const audio = new Audio('22d89a@1695807476313.mp3');
    audio.play();
  }

  window.addEventListener('click', playMusic);
</script>
</body>
</html>

音乐更改的话const audio = new Audio('22d89a@1695807476313.mp3');

运行代码后点击就开始播放音乐了用idea的话好像不能播放音乐，不注意试