七夕给女朋友看这个，感动哭了😭

周四就是七夕了，xdm，准备好了 🐴。现成的惊喜，快来拿走 🔥，进来就是你的，分分钟的事情，冲冲冲！

# 一、七夕

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

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

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

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

# 二、上效果

# 2.1 第一屏

# 2.2 第二屏

# 2.3 第三屏

# 三、教程

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

# 3.1 项目

github 源码地址 (opens new window)

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

# 3.2 图片

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

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

# 3.4 背景音乐

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

# 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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>