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

·  阅读 14614
七夕给女朋友看这个,感动哭了😭

一、七夕

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

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

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

二、上效果

2.1 第一屏

image.png

2.2 第二屏

image.png

2.3 第三屏

qixi.png

三、教程

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

3.1 项目

github 源码地址

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

image.png

3.2 图片

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

image.png

image.png

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

3.4 背景音乐

image.png

3.3 暂停播放按钮

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

image.png

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云的对象存储,创建一个存储桶,直接上传本地修改好的资源即可。很便宜,可以理解为基本不要钱。

image.png

四、点关注不迷路

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

image.png

五、往期回顾

分类:
前端
收藏成功!
已添加到「」, 点击更改