likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 66

一、七夕

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

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

顺便问下：程序员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 背景音乐

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

3.3 暂停播放按钮

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

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

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 开车群

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

五、往期回顾

转载自:https://juejin.cn/post/7127260971961155621
评论
请登录