马上就要七夕了，我帮你实现了一款专属口红键盘，快拿去送给你的女朋友吧~

我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！

七夕节马上就要到了，不知道各位掘友们是否已经给自己的女朋友准备好了礼物呢？不要再送口红了，快来看看这款口红色号键盘。每一个键帽都是一款口红颜色，送给哪个小姐姐估计都会很开心。

先来感受一下效果，有些按键会有声音，建议戴耳机体验~戳这里。

接下来我们就来一步步实现这款有颜又有料的键盘。技术上没有什么难点，主要用到了CSS的阴影和动画来实现键盘的展示和按键效果，用HTML的audio标签来实现点击按键播放歌曲的功能，并全局监听了keydown和keyup事件实现敲击键盘按键同步的效果。最后用github-pages完成了一键部署。

键盘效果实现

键盘的点按效果就是通过不同的阴影来实现的。正常情况下用一个阴影来实现立体展示效果，在active的时候赋值一个较小的阴影实现按下的效果。再用transition实现一个简单的过渡，使得点按不那么的生硬。

.circle {
  display: flex;
  justify-content: center;
  width: 60px;
  height: 56px;
  border-radius: 60px;
  margin-right: 10px;
  font-weight: 900;
  color: rgb(181, 153, 152);
  box-shadow: inset 0px 0px 2px #fff, 0px 7px 0px 0px #555, 0px 9px 6px #fff;
  transition: all 0.1s linear;
  .text {
    margin-top: 8px;
  }
  &.active {
    box-shadow: inset 0px 0px 2px #fff, 0px 2px 0px 0px #555, 0px 2px 3px #fff;;
    transform: translate(3px, 5px);
  }
}

这里给大家介绍一个有关阴影效果比较有意思的网站，可以做一些实时的交互。感兴趣的可以去玩玩看，戳这里。

点击按键播放歌曲

首先我们需要确定点击哪些按键可以播放歌曲，然后给每一个按键生成一个audio标签。

<audio class="audio"
  v-for="item in letter"
  :src="audioSrc[item]"
  controls
  :id="item"
  hidden="true">
</audio>

然后点击按键的时候，判断当前按键是否重复点击，如果true表名当前歌曲正在播放，直接return就好；如果不是先要将上一个正在播放的audio暂定，然后获取到当前audio，将其currentTime设置为0，这样就又可以从头开始播放了。

play(type, color) {
  if (!LETTER.includes(type)) {
    return;
  }
  if (this.currentType) {
    this.currentColor = color;
    if (type !== this.currentType) {
      this.audio.pause();
    } else {
      return;
    }
  }
  this.currentType = type;
  this.audio = document.getElementById(type);
  this.audio.currentTime = 0;
  this.audio.play();
},

敲击键盘按键动画同步

只需在keydown的时候将当前按键激活，在keyup的时候再取消就可以了。

mounted() {
  const _this = this;
  window.addEventListener('keydown', function(e) {
    _this.currentKey = e.key;
  });
  window.addEventListener('keyup', function(e) {
    _this.currentKey = '';
  });
}

部署到github

做好了键盘怎么给女朋友展示呢？总不能通过localhost本地启动让女朋友在你的电脑上看吧。当然是要发给她一个链接，给她一个专属网址访问，这样才能看出你的用心。

接下来我们就用github自带的github-pages来实现一键部署的功能。

首先在代码库中找到settings，然后点击choose a theme随便选择一个主题，按照步骤操作即可。

操作完之后会自动生成gh-pages分支。然后在actions下就可以看见有一次构建部署了。

点击进去会有构建的详情。通过deploy下面的链接就可以访问我们的应用了。

接下来就是需要将我们打包好的的代码部署到这个下面就可以了。这里我们采用将打包好的文件推送到一个特定的分支（我这里设置为master），然后更改pages的设置监听这个分支，只要有更新就重新部署应用的方式。

// 打包构建出dist目录
npm run build

// 进入到dist目录
cd dist

// 创建本地git仓库
git init

git add .

git commit -m 'deploy'

git push -f 你的仓库地址 分支名称 // git push -f https://github.com/CuteSunLee/keyboard.git master

这里需要注意一下，要采用强推的方式才行，要不会有冲突。

然后去刚才的settings -> pages下面，把监听分支改成master就可以了。

总结

有了这款键盘，快去送给你心爱的女朋友吧，当然有个实物一起送才更好呦（PS：我的键盘是我自己买的，就是冲着颜值，机械键盘的参数呀什么的都不重要，这款搜洛斐口红键盘就可以）~还没有女朋友的可以先收藏着，以后不知道送什么礼物的时候可以试试。

代码地址：github.com/CuteSunLee/…

彩蛋

如果连续敲击键盘英文字母中的五个会命中个小彩蛋，会让页面变成pink pink的，大家不要看源代码猜猜看是那五个连续的字母呢，欢迎评论区交流~

参考文章

Github 部署个人网页 | 一键部署