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

一、七夕

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

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

七夕动画在线预览
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实现，目前只做了暂停背景音乐，暂停动画还没做，感觉没啥必要

参考实现：blog.csdn.net/u014291497/…

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 .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>

3.4 部署

我选择了tx云的对象存储，创建一个存储桶，直接上传本地修改好的资源即可。很便宜，可以理解为基本不要钱。

七夕动画在线预览

四、点关注不迷路

这类东西感觉搞得挺有意思的，后面会多写一些，有兴趣的可以点击博客扫码加VX ，可以拉你进摸鱼群 or 开车群