七夕给女朋友看这个，立马哭了 😭

一、七夕

周四就是七夕了，xdm，准备好了 🐴

很老的一个某课的教程，拿出来改改，之前的有些 bug。chrome 改了规则，背景音乐没法自动播放，就加了个暂停播放按钮(有没有更好的方案？)，改了些图。先放出来给兄弟们看看，有什么意见帮忙提提（女朋友应该不看我掘金）

七夕动画在线预览
github 源码地址
点击博客扫码加 VX 拉你进摸鱼群 or 开车群【七夕群里发 🧧】

顺便问下：程序员 8 成都有女朋友吧？评论区说说？

二、上效果

2.1 第一屏

2.2 第二屏

2.3 第三屏

三、教程

废话不多说，直接变成你的

3.1 项目

github 源码地址

修改一些自定义文本，各个配置项

3.2 图片

稿定在线 PS 把文件夹里面的图直接拖到网页进行 PS
在线抠图截的图大部分不能透明，直接在线一键抠图，超级简单

主要修改images/background/a_background_top.png 和 images/logo.png 两个地方

3.4 背景音乐

九酷音乐不开 VIP 可以在这下载
九酷音乐下载油猴脚本，音乐 MP3 歌曲免费下载不知道会不会被噶？？？
在线歌曲剪辑上面下载的截取一段就可以
替换以下资源即可

3.3 暂停播放按钮

纯 css 实现，目前只做了暂停背景音乐，暂停动画还没做，感觉没啥必要

参考实现：https://blog.csdn.net/u014291497/article/details/78398146

button {
  padding: 0;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer;
}
#playBtn {
  height: 74px;
  border-style: solid;
  border-width: 37px 0 37px 60px;
  border-color: transparent transparent transparent black;
  transition: all 0.5s ease;
  z-index: 999999;
  position: absolute;
  bottom: 50px;
  right: 50px;
}
#playBtn:hover {
  border-style: double;
  border-width: 0px 0px 0px 60px;
}

#pauseBtn {
  display: none;
  width: 74px;
  height: 74px;
  border-style: double;
  border-width: 0px 0px 0px 60px;
  border-color: #202020;
  z-index: 999999;
  position: absolute;
  bottom: 50px;
  right: 56px;
}

js 控制播放

  <script>
    let isFirst = true;
    const playBtn = document.getElementById("playBtn");
    const pauseBtn = document.getElementById("pauseBtn");
    const audio = document.getElementById("myAudio");

    function onClickPlay() {
      audio.play();
      if (isFirst) {
        $(function () {
          Qixi();
          isFirst = false;
        });
      }
      playBtn.style.display = "none";
      pauseBtn.style.display = "inline-block";
      let state = boy.style["animationPlayState"];
    }

    function onClickPause() {
      audio.pause();
      playBtn.style.display = "inline-block";
      pauseBtn.style.display = "none";
    }
  </script>