我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
七夕节马上就要到了，不知道各位掘友们是否已经给自己的女朋友准备好了礼物呢？不要再送口红了，快来看看这款口红色号键盘。每一个键帽都是一款口红颜色，送给哪个小姐姐估计都会很开心。
先来感受一下效果，有些按键会有声音，建议戴耳机体验~戳这里。
接下来我们就来一步步实现这款有颜又有料的键盘。技术上没有什么难点，主要用到了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：我的键盘是我自己买的，就是冲着颜值，机械键盘的参数呀什么的都不重要，这款搜洛斐口红键盘就可以）~还没有女朋友的可以先收藏着，以后不知道送什么礼物的时候可以试试。
彩蛋
如果连续敲击键盘英文字母中的五个会命中个小彩蛋，会让页面变成pink pink的，大家不要看源代码猜猜看是那五个连续的字母呢，欢迎评论区交流~