页脚养鱼

在inject的bottom下添加如下代码

1
- <script data-pjax src="https://cdn.jsdelivr.net/gh/Jnylife/CDN@1.3/js/fish.js"></script>
  • 效果如图所示:

image-20211203123652468

底部按钮调整

PC端

image-20211203124004253

将如下代码添加到themes/source/css/下的任意css文件当中即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (min-width:776px) {
#rightside button{
margin-right: 8px;
}
#rightside > div > button, #rightside > div > a{
margin-bottom: 5px;
width: 45px;
height: 45px;
border-radius: 22.5px;
font-size: 22px;
}
#rightside #rightside-config-hide{
transform: translate(55px, 0);
}
}

移动端

移动端只要调整一下边框圆角即可,不然会挡住文章内容

image-20211203124638163

1
2
3
4
5
6
@media screen and (max-width:776px){

#rightside > div > button, #rightside > div > a{
border-radius: 50%;
}
}

留言板钢琴

image-20211203125442415

现在留言板文件夹下新建两个css文件,如图:

image-20211203124934214

a.css文件夹下贴入如下代码:

1
.VinoBg{position:relative;display:flex;align-items:center;height:33vh;padding:0;border:0;overflow:hidden;z-index:2}.wrapper{position:absolute;left:50%;top:70%;transform:scale(1.5,1.5) translate(-50%,-50%)}.floor{position:absolute;left:50%;top:50%;width:350px;height:5px;background:#673c63;transform:translate(-50%,-50%);box-shadow:0 2px 5px #111;z-index:2}.candles{position:absolute;left:50%;top:50%;width:250px;height:150px;transform:translate(-50%,-100%);z-index:1}.candle1{position:absolute;left:50%;top:50%;width:35px;height:100px;background:#fff;border:3px solid #673c63;border-bottom:0;border-radius:3px;transform-origin:center right;transform:translate(60%,-25%);box-shadow:-2px 0 0 #95c6f2 inset;animation:expand-body 3s infinite linear}.candle1__stick,.candle2__stick{position:absolute;left:50%;top:0;width:3px;height:15px;background:#673c63;border-radius:8px;transform:translate(-50%,-100%)}.candle2__stick{height:12px;transform-origin:bottom center;animation:stick-animation 3s infinite linear}.candle1__eyes,.candle2__eyes{position:absolute;left:50%;top:0;width:35px;height:30px;transform:translate(-50%,0)}.candle1__eyes-one{position:absolute;left:30%;top:20%;width:5px;height:5px;border-radius:100%;background:#673c63;transform:translate(-70%,0);animation:blink-eyes 3s infinite linear}.candle1__eyes-two{position:absolute;left:70%;top:20%;width:5px;height:5px;border-radius:100%;background:#673c63;transform:translate(-70%,0);animation:blink-eyes 3s infinite linear}.candle1__mouth{position:absolute;left:40%;top:20%;width:0;height:0;border-radius:20px;background:#673c63;transform:translate(-50%,-50%);animation:uff 3s infinite linear}.candle__smoke-one{position:absolute;left:30%;top:50%;width:30px;height:3px;background:grey;transform:translate(-50%,-50%);animation:move-left 3s infinite linear}.candle__smoke-two{position:absolute;left:30%;top:40%;width:10px;height:10px;border-radius:10px;background:grey;transform:translate(-50%,-50%);animation:move-top 3s infinite linear}.candle2{position:absolute;left:20%;top:65%;width:42px;height:60px;background:#fff;border:3px solid #673c63;border-bottom:0;border-radius:3px;transform:translate(60%,-15%);transform-origin:center right;box-shadow:-2px 0 0 #95c6f2 inset;animation:shake-left 3s infinite linear}.candle2__eyes-one{position:absolute;left:30%;top:50%;width:5px;height:5px;display:inline-block;border:0 solid #673c63;border-radius:100%;float:left;background:#673c63;transform:translate(-80%,0);animation:changeto-lower 3s infinite linear}.candle2__eyes-two{position:absolute;left:70%;top:50%;width:5px;height:5px;display:inline-block;border:0 solid #673c63;border-radius:100%;float:left;background:#673c63;transform:translate(-80%,0);animation:changeto-greater 3s infinite linear}.light__wave{position:absolute;top:35%;left:35%;width:75px;height:75px;border-radius:100%;z-index:0;transform:translate(-25%,-50%) scale(2.5,2.5);border:2px solid rgba(255,255,255,.2);animation:expand-light 3s infinite linear}.candle2__fire{position:absolute;top:50%;left:40%;display:block;width:16px;height:20px;background-color:red;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#ff9800;transform:translate(-50%,-50%);animation:dance-fire 3s infinite linear}@keyframes blink-eyes{0%,35%{opacity:1;transform:translate(-70%,0)}36%,39%{opacity:0;transform:translate(-70%,0)}40%{opacity:1;transform:translate(-70%,0)}50%,65%{transform:translate(-140%,0)}66%{transform:translate(-70%,0)}}@keyframes expand-body{0%,40%{transform:scale(1,1) translate(60%,-25%)}45%,55%{transform:scale(1.1,1.1) translate(60%,-28%)}60%{transform:scale(.89,.89) translate(60%,-25%)}65%{transform:scale(1,1) translate(60%,-25%)}70%{transform:scale(.95,.95) translate(60%,-25%)}75%{transform:scale(1,1) translate(60%,-25%)}}@keyframes uff{0%,40%{width:0;height:0}50%,54%{width:15px;height:15px;left:30%}59%{width:5px;height:5px;left:20%}62%{width:2px;height:2px;left:20%}67%{width:0;height:0;left:30%}}@keyframes change-background{0%,100%,59%,98%{background:#fef4ad}61%,97%{background:#f8ae39}}@keyframes move-left{0%,100%,59%{width:0;left:40%}60%{width:30px;left:30%}68%{width:0;left:20%}}@keyframes move-top{0%,100%,64%{width:0;height:0;top:0}65%{width:10px;height:10px;top:40%;left:40%}80%{width:0;height:0;top:20%}}@keyframes shake-left{0%,40%{left:20%;transform:translate(60%,-15%)}50%,54%{left:20%;transform:translate(60%,-15%)}59%{left:20%;transform:translate(60%,-15%)}62%{left:18%;transform:translate(60%,-15%)}65%{left:21%;transform:translate(60%,-15%)}67%{left:20%;transform:translate(60%,-15%)}75%{left:20%;transform:scale(1.15,.85) translate(60%,-15%);background:#fff;border-color:#673c63}91%{left:20%;transform:scale(1.18,.82) translate(60%,-10%);background:#f44336;border-color:#f44336;box-shadow:-2px 0 0 #f44336 inset}92%{left:20%;transform:scale(.85,1.15) translate(60%,-15%)}95%{left:20%;transform:scale(1.05,.95) translate(60%,-15%)}97%{left:20%;transform:scale(1,1) translate(60%,-15%)}}@keyframes stick-animation{0%,40%{left:50%;top:0;transform:translate(-50%,-100%)}50%,54%{left:50%;top:0;transform:translate(-50%,-100%)}59%{left:50%;top:0;transform:translate(-50%,-100%)}62%{left:50%;top:0;transform:rotateZ(-15deg) translate(-50%,-100%)}65%{left:50%;top:0;transform:rotateZ(15deg) translate(-50%,-100%)}70%{left:50%;top:0;transform:rotateZ(-5deg) translate(-50%,-100%)}72%{left:50%;top:0;transform:rotateZ(5deg) translate(-50%,-100%)}74%,84%{left:50%;top:0;transform:rotateZ(0) translate(-50%,-100%)}85%{transform:rotateZ(180deg) translate(0,120%)}92%{left:50%;top:0;transform:translate(-50%,-100%)}}@keyframes expand-light{10%,29%,59%,89%{transform:translate(-25%,-50%) scale(0,0);border:2px solid rgba(255,255,255,0)}20%,50%,90%{transform:translate(-25%,-50%) scale(1,1)}26%,27%,56%,57%,95%,96%{transform:translate(-25%,-50%) scale(2,2);border:2px solid rgba(255,255,255,.5)}0%,100%,28%,58%{transform:translate(-25%,-50%) scale(2.5,2.5);border:2px solid rgba(255,255,255,.2)}}@keyframes dance-fire{59%,89%{left:40%;width:0;height:0}0%,15%,23%,31%,39%,47%,55%,7%,90%{left:40.8%;width:16px;height:20px;background:#ffc107}11%,19%,27%,3%,35%,43%,51%,58%,94%{left:41.2%;width:16px;height:20px;background:#ff9800}}@keyframes changeto-lower{0%,70%,90%{padding:0;display:inline-block;border-radius:100%;background:#673c63;border-width:0;border:0 solid #673c63;transform:translate(-90%,0)}71%,89%{background:0 0;border:solid #673c63;border-radius:0;border-width:0 2px 2px 0;display:inline-block;padding:1px;float:left;transform-origin:bottom left;transform:rotate(-45deg) translate(-50%,-65%);-webkit-transform:rotate(-45deg) translate(-50%,-65%)}}@keyframes changeto-greater{0%,70%,90%{top:50%;padding:0;display:inline-block;border-radius:100%;background:#673c63;border-width:0;border:0 solid #673c63;transform:translate(-80%,0)}71%,89%{top:30%;background:0 0;border:solid #673c63;border-radius:0;border-width:0 2px 2px 0;display:inline-block;padding:1px;float:left;transform-origin:bottom left;transform:rotate(135deg) translate(-80%,20%);-webkit-transform:rotate(135deg) translate(-80%,20%)}}.contentCat{position:fixed;background-color:#39588c;top:0;left:0;width:100%;height:100%;z-index:9999999}.containerCat{top:0;bottom:0;left:0;right:0}#bongo-cat{position:absolute;height:60vh;width:60vw;bottom:0;left:0;right:0;margin:0 auto}.typing-animation{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:1.2s;animation-duration:1.2s}path#f1-l1{-webkit-animation-name:typing-f1-l1;animation-name:typing-f1-l1}path#f1-l2{-webkit-animation-name:typing-f1-l2;animation-name:typing-f1-l2}path#f1-l3{-webkit-animation-name:typing-f1-l3;animation-name:typing-f1-l3}path#f2-l4{-webkit-animation-name:typing-f2-l4;animation-name:typing-f2-l4}path#f2-l5{-webkit-animation-name:typing-f2-l5;animation-name:typing-f2-l5}path#f2-l6{-webkit-animation-name:typing-f2-l6;animation-name:typing-f2-l6}path#f3-l7{-webkit-animation-name:typing-f3-l7;animation-name:typing-f3-l7}path#f3-l8{-webkit-animation-name:typing-f3-l8;animation-name:typing-f3-l8}path#f3-l9{-webkit-animation-name:typing-f3-l9;animation-name:typing-f3-l9}#paw-left--down,#paw-left--up,#paw-right--down,#paw-right--up{-webkit-animation:blink .3s infinite;animation:blink .3s infinite}#paw-left--down,#paw-right--up{-webkit-animation-delay:150ms;animation-delay:150ms}@-webkit-keyframes blink{0%{opacity:0}49%{opacity:0}50%{opacity:1}}@keyframes blink{0%{opacity:0}49%{opacity:0}50%{opacity:1}}#laptop__code{-webkit-transform:rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px);transform:rotateX(-37deg) rotateY(-46deg) rotateZ(-23deg) translateX(8px) translateY(20px) translateZ(-50px)}.mainV{width:800px;height:330px;position:relative;left:140px;top:-100px}.face-key,.face-keyboard{position:absolute}.keyboard{position:relative;left:27%;top:33%;transform-origin:bottom left;transform:perspective(10000px) rotateY(-16deg) rotateX(66deg) rotateZ(37deg);transform-style:preserve-3d}.keyboard__front{width:800px;height:220px;transform:rotateY(0) translateZ(15px);background-color:#3f3b43;transform-style:preserve-3d}.keyboard__back{width:800px;height:220px;transform:rotateY(180deg) translateZ(15px);background-color:#151514;box-shadow:0 25px 0 rgb(0 0 0 / 14%),-40px 5px 0 rgb(0 0 0 / 12%),-40px 25px 0 rgb(0 0 0 / 20%);transform-style:preserve-3d}.keyboard__right{width:30px;height:220px;transform:rotateY(90deg) translateZ(785px);background-image:linear-gradient(to right,#1a191c 50%,#151514 50%);transform-style:preserve-3d}.keyboard__left{width:30px;height:220px;transform:rotateY(-90deg) translateZ(15px);background-image:linear-gradient(to right,#1a191c 50%,#151514 50%);transform-style:preserve-3d}.keyboard__top{width:800px;height:30px;transform:rotateX(90deg) translateZ(15px);background-color:#3f3b43;transform-style:preserve-3d}.keyboard__bottom{width:800px;height:30px;transform:rotateX(-90deg) translateZ(205px);background-image:linear-gradient(to bottom,#1a191c 50%,#151514 50%);transform-style:preserve-3d}.keyboard__f-top{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;width:803px;height:100px;margin-top:10px;border-bottom:20px solid #2a2631;transform:translateZ(5px) rotateX(-6deg) rotateZ(.9deg);background-color:#3f3b43;transform-style:preserve-3d}.keyboard__led{position:relative;display:flex;justify-content:center;align-items:flex-end;width:110px;height:42px;background-color:#3cfbfe;border-top:10px solid #151514;border-left:10px solid #151514;box-shadow:inset 8px 8px 0 #00a6d1;transform-style:preserve-3d}.keyboard__line{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:25px;padding:0 1px;transform:rotateZ(180deg);overflow:hidden;transform-style:preserve-3d}.keyboard__line:nth-of-type(1){animation:line 1s ease-in alternate infinite .1s}.keyboard__line:nth-of-type(2){animation:line 1s ease-in alternate infinite .2s}.keyboard__line:nth-of-type(3){animation:line 1s ease-in alternate infinite .3s}.keyboard__line:nth-of-type(4){animation:line 1s ease-in alternate infinite .4s}.keyboard__line:nth-of-type(5){animation:line 1s ease-in alternate infinite .5s}.keyboard__line:nth-of-type(6){animation:line 1s ease-in alternate infinite .6s}.keyboard__line:nth-of-type(7){animation:line 1s ease-in alternate infinite .7s}.keyboard__line:nth-of-type(8){animation:line 1s ease-in alternate infinite .8s}.keyboard__line:nth-of-type(9){animation:line 1s ease-in alternate infinite .9s}.keyboard__line:nth-of-type(10){animation:line 1s ease-in alternate infinite 1s}.keyboard__dot{height:6px;width:6px;flex-shrink:0;background-color:rgba(21,21,20,.3);transform-style:preserve-3d}.keyboard__buttons{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;width:60px;height:80px;margin:0 40px;padding:5px 0;transform-style:preserve-3d}.keyboard__button{height:20px;width:20px;margin:0 3px;box-shadow:4px 4px 0 #151514;background-color:#3cfbfe;transform-style:preserve-3d}.keyboard__button:nth-of-type(2){animation:button-1 1s infinite}.keyboard__button:nth-of-type(3){animation:button-1 2s infinite reverse}.keyboard__button:nth-of-type(5){animation:button-2 2s infinite}.keyboard__button:nth-of-type(6){animation:button-3 1.5s infinite}.keyboard__speaker{width:70px;height:70px;background-color:#1a191c;border-radius:50%;margin-bottom:5px;background-image:radial-gradient(#1a191c 3px,transparent 3px);background-color:#3f3b43;background-position:0 0,4px 4px;background-size:10px 10px;transform-style:preserve-3d}.keyboard__f-bottom{position:relative;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:nowrap;width:630px;height:120px;margin:0 auto;padding-top:1px;background-color:#fff;transform-style:preserve-3d}.key{position:relative;width:30px;z-index:1000;transform-style:preserve-3d}.key:nth-of-type(1){animation:key-down-white .5s infinite alternate .0666666667s}.key:nth-of-type(2){animation:key-down-white .5s infinite alternate .1333333333s}.key:nth-of-type(3){animation:key-down-white .5s infinite alternate .2s}.key:nth-of-type(4){animation:key-down-white .5s infinite alternate .2666666667s}.key:nth-of-type(5){animation:key-down-white .5s infinite alternate .3333333333s}.key:nth-of-type(6){animation:key-down-white .5s infinite alternate .4s}.key:nth-of-type(7){animation:key-down-white .5s infinite alternate .4666666667s}.key:nth-of-type(8){animation:key-down-white .5s infinite alternate .5333333333s}.key:nth-of-type(9){animation:key-down-white .5s infinite alternate .6s}.key:nth-of-type(10){animation:key-down-white .5s infinite alternate .6666666667s}.key:nth-of-type(11){animation:key-down-white .5s infinite alternate .7333333333s}.key:nth-of-type(12){animation:key-down-white .5s infinite alternate .8s}.key:nth-of-type(13){animation:key-down-white .5s infinite alternate .8666666667s}.key:nth-of-type(14){animation:key-down-white .5s infinite alternate .9333333333s}.key:nth-of-type(15){animation:key-down-white .5s infinite alternate 1s}.key:nth-of-type(16){animation:key-down-white .5s infinite alternate 1.0666666667s}.key:nth-of-type(17){animation:key-down-white .5s infinite alternate 1.1333333333s}.key:nth-of-type(18){animation:key-down-white .5s infinite alternate 1.2s}.key:nth-of-type(19){animation:key-down-white .5s infinite alternate 1.2666666667s}.key:nth-of-type(20){animation:key-down-white .5s infinite alternate 1.3333333333s}.key:nth-of-type(21){animation:key-down-white .5s infinite alternate 1.4s}.key__front{width:30px;height:120px;transform:rotateY(0) translateZ(2px);background-color:#fff}.key__front-1{animation:key-down-color .5s infinite alternate .0666666667s}.key__front-2{animation:key-down-color .5s infinite alternate .1333333333s}.key__front-3{animation:key-down-color .5s infinite alternate .2s}.key__front-4{animation:key-down-color .5s infinite alternate .2666666667s}.key__front-5{animation:key-down-color .5s infinite alternate .3333333333s}.key__front-6{animation:key-down-color .5s infinite alternate .4s}.key__front-7{animation:key-down-color .5s infinite alternate .4666666667s}.key__front-8{animation:key-down-color .5s infinite alternate .5333333333s}.key__front-9{animation:key-down-color .5s infinite alternate .6s}.key__front-10{animation:key-down-color .5s infinite alternate .6666666667s}.key__front-11{animation:key-down-color .5s infinite alternate .7333333333s}.key__front-12{animation:key-down-color .5s infinite alternate .8s}.key__front-13{animation:key-down-color .5s infinite alternate .8666666667s}.key__front-14{animation:key-down-color .5s infinite alternate .9333333333s}.key__front-15{animation:key-down-color .5s infinite alternate 1s}.key__front-16{animation:key-down-color .5s infinite alternate 1.0666666667s}.key__front-17{animation:key-down-color .5s infinite alternate 1.1333333333s}.key__front-18{animation:key-down-color .5s infinite alternate 1.2s}.key__front-19{animation:key-down-color .5s infinite alternate 1.2666666667s}.key__front-20{animation:key-down-color .5s infinite alternate 1.3333333333s}.key__front-21{animation:key-down-color .5s infinite alternate 1.4s}.key__back{width:30px;height:120px;transform:rotateY(180deg) translateZ(2px);background-color:#b2b3d2}.key__right{width:4px;height:120px;transform:rotateY(90deg) translateZ(28px);background-color:#b2b3d2}.key__left{width:4px;height:120px;transform:rotateY(-90deg) translateZ(2px);background-color:#fff}.key__top{width:30px;height:4px;transform:rotateX(90deg) translateZ(2px);background-color:#b2b3d2}.key__bottom{width:30px;height:4px;transform:rotateX(-90deg) translateZ(118px);background-color:#b2b3d2;border-left:1px solid #2a2631}.key--black{position:absolute;transform:translateZ(8px);border-bottom:none;z-index:2000}.key--black-1{left:15px}.key--black-2{left:50px}.key--black-3{left:110px}.key--black-4{left:140px}.key--black-5{left:170px}.key--black-6{left:230px}.key--black-7{left:260px}.key--black-8{left:320px}.key--black-9{left:350px}.key--black-10{left:380px}.key--black-11{left:440px}.key--black-12{left:470px}.key--black-13{left:530px}.key--black-14{left:560px}.key--black-1{animation:key-down-black .5s infinite alternate .0666666667s}.key--black-2{animation:key-down-black .5s infinite alternate .1333333333s}.key--black-3{animation:key-down-black .5s infinite alternate .2s}.key--black-4{animation:key-down-black .5s infinite alternate .2666666667s}.key--black-5{animation:key-down-black .5s infinite alternate .3333333333s}.key--black-6{animation:key-down-black .5s infinite alternate .4s}.key--black-7{animation:key-down-black .5s infinite alternate .4666666667s}.key--black-8{animation:key-down-black .5s infinite alternate .5333333333s}.key--black-9{animation:key-down-black .5s infinite alternate .6s}.key--black-10{animation:key-down-black .5s infinite alternate .6666666667s}.key--black-11{animation:key-down-black .5s infinite alternate .7333333333s}.key--black-12{animation:key-down-black .5s infinite alternate .8s}.key--black-13{animation:key-down-black .5s infinite alternate .8666666667s}.key--black-14{animation:key-down-black .5s infinite alternate .9333333333s}.key--black-15{animation:key-down-black .5s infinite alternate 1s}.key--black .key__front{width:20px;height:70px;transform:rotateY(0) translateZ(3px);background-color:#3f3b43;border-right:none}.key--black .key__back{width:20px;height:70px;transform:rotateY(180deg) translateZ(3px);background-color:#2a2631}.key--black .key__right{width:6px;height:70px;transform:rotateY(90deg) translateZ(16px);background-color:#1a191c;border-bottom:none}.key--black .key__left{width:6px;height:70px;transform:rotateY(-90deg) translateZ(3px);background-color:#3f3b43}.key--black .key__top{width:20px;height:6px;transform:rotateX(90deg) translateZ(3px);background-color:#3f3b43}.key--black .key__bottom{width:20px;height:6px;transform:rotateX(-90deg) translateZ(67px);background-color:#1a191c}@keyframes key-down-color{0%{background-color:#88fdfe}100%,30%{background-color:#fff}}@keyframes key-down-white{0%{transform:translateZ(0) rotateX(-1deg);transform-origin:center}100%,30%{transform:translateZ(3px) rotateX(0);transform-origin:center}}@keyframes key-down-black{0%{transform-origin:center;transform:translateZ(9px)}100%,30%{transform:translateZ(8px);transform-origin:center}}@keyframes line{0%,100%{height:60%}24%{height:80%}25%,30%{height:85%}55%,60%{height:65%}61%,65%{height:90%}80%,82%{height:50%}83%,90%{height:40%}95%{height:40%}}@keyframes button-1{0%{background-color:#3cfbfe}100%,50%{background-color:#b8acfb}}@keyframes button-2{0%,40%{background-color:#ffa862}100%,50%{background-color:#3cfbfe}}@keyframes button-3{0%,40%{background-color:#00d27f}100%,50%{background-color:#3cfbfe}}.cat-container{position:fixed;background:#2c4763;display:flex;height:100vh;width:100vw;line-height:1.5;z-index:99991;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==)}.cat{margin:auto;width:16em;height:16em}.cat__segment{position:absolute;top:50%;left:50%;width:3em;height:2em;transform:translate(-50%,-50%)}.cat__segment:before{animation:loop 2s cubic-bezier(.6,0,.4,1) infinite running;background:linear-gradient(90deg,#fff 20%,#e6e6e6 20% 80%,#fff 80%);border-radius:.25em;content:"";display:block;will-change:transform;width:100%;height:100%}.cat__segment:first-of-type{width:4em;height:4em;z-index:1}.cat__segment:first-of-type:before{background:radial-gradient(.25em .25em at 1.25em 1.6em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(.75em .75em at 1.25em 1.75em,#1a1a1a 48%,rgba(26,26,26,0) 50%),radial-gradient(.25em .25em at 2.75em 1.6em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(.75em .75em at 2.75em 1.75em,#1a1a1a 48%,rgba(26,26,26,0) 50%),radial-gradient(.9em .8em at 1.5em 2.65em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(.9em .8em at 2.5em 2.65em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(1em .8em at 1.6em 2.75em,#ccc 48%,rgba(204,204,204,0) 50%),radial-gradient(1em .8em at 2.4em 2.75em,#ccc 48%,rgba(204,204,204,0) 50%),radial-gradient(.75em .75em at 50% 2.5em,#e69999 48%,rgba(230,153,153,0) 50%),radial-gradient(4em 3em at 50% 2em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(4em 3em at 50% 2.2em,#ccc 48%,rgba(204,204,204,0) 50%),radial-gradient(1em 3em at .75em 1.5em,#e69999 39%,#fff 40% 49%,rgba(255,255,255,0) 50%),radial-gradient(1em 3em at 3.25em 1.5em,#e69999 39%,#fff 40% 49%,rgba(255,255,255,0) 50%),radial-gradient(1em 2em at .5em 2.8em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(1em 2em at .5em 3em,#ccc 48%,rgba(204,204,204,0) 50%),radial-gradient(1em 2em at 3.5em 2.8em,#fff 48%,rgba(255,255,255,0) 50%),radial-gradient(1em 2em at 3.5em 3em,#ccc 48%,rgba(204,204,204,0) 50%);background-repeat:no-repeat}.cat__segment:last-of-type{width:3em;height:4em}.cat__segment:last-of-type:before{background:linear-gradient(90deg,#fff 20%,#e6e6e6 20% 80%,#fff 80%) 0 1.5em/3em .5em,radial-gradient(3em 2em at top center,#e6e6e6 30%,#fff 31% 48%,rgba(255,255,255,0) 50%) 0 2em/3em 2em,radial-gradient(1em 4em at .5em 0,#fff 48%,rgba(255,255,255,0) 50%) 0 2em/3em 2em,radial-gradient(1em 4em at 2.5em 0,#fff 48%,rgba(255,255,255,0) 50%) 0 2em/3em 2em;background-repeat:no-repeat}.cat__segment:nth-of-type(1){transform:translate(-50%,-50%) rotate(-20deg)}.cat__segment:nth-of-type(1):before{animation-delay:0s;transform:translateX(6em)}.cat__segment:nth-of-type(2){transform:translate(-50%,-50%) rotate(-18.6666666667deg)}.cat__segment:nth-of-type(2):before{animation-delay:20ms;transform:translateX(6em)}.cat__segment:nth-of-type(3){transform:translate(-50%,-50%) rotate(-17.3333333333deg)}.cat__segment:nth-of-type(3):before{animation-delay:40ms;transform:translateX(6em)}.cat__segment:nth-of-type(4){transform:translate(-50%,-50%) rotate(-16deg)}.cat__segment:nth-of-type(4):before{animation-delay:60ms;transform:translateX(6em)}.cat__segment:nth-of-type(5){transform:translate(-50%,-50%) rotate(-14.6666666667deg)}.cat__segment:nth-of-type(5):before{animation-delay:80ms;transform:translateX(6em)}.cat__segment:nth-of-type(6){transform:translate(-50%,-50%) rotate(-13.3333333333deg)}.cat__segment:nth-of-type(6):before{animation-delay:.1s;transform:translateX(6em)}.cat__segment:nth-of-type(7){transform:translate(-50%,-50%) rotate(-12deg)}.cat__segment:nth-of-type(7):before{animation-delay:.12s;transform:translateX(6em)}.cat__segment:nth-of-type(8){transform:translate(-50%,-50%) rotate(-10.6666666667deg)}.cat__segment:nth-of-type(8):before{animation-delay:.14s;transform:translateX(6em)}.cat__segment:nth-of-type(9){transform:translate(-50%,-50%) rotate(-9.3333333333deg)}.cat__segment:nth-of-type(9):before{animation-delay:.16s;transform:translateX(6em)}.cat__segment:nth-of-type(10){transform:translate(-50%,-50%) rotate(-8deg)}.cat__segment:nth-of-type(10):before{animation-delay:.18s;transform:translateX(6em)}.cat__segment:nth-of-type(11){transform:translate(-50%,-50%) rotate(-6.6666666667deg)}.cat__segment:nth-of-type(11):before{animation-delay:.2s;transform:translateX(6em)}.cat__segment:nth-of-type(12){transform:translate(-50%,-50%) rotate(-5.3333333333deg)}.cat__segment:nth-of-type(12):before{animation-delay:.22s;transform:translateX(6em)}.cat__segment:nth-of-type(13){transform:translate(-50%,-50%) rotate(-4deg)}.cat__segment:nth-of-type(13):before{animation-delay:.24s;transform:translateX(6em)}.cat__segment:nth-of-type(14){transform:translate(-50%,-50%) rotate(-2.6666666667deg)}.cat__segment:nth-of-type(14):before{animation-delay:.26s;transform:translateX(6em)}.cat__segment:nth-of-type(15){transform:translate(-50%,-50%) rotate(-1.3333333333deg)}.cat__segment:nth-of-type(15):before{animation-delay:.28s;transform:translateX(6em)}.cat__segment:nth-of-type(16){transform:translate(-50%,-50%) rotate(0)}.cat__segment:nth-of-type(16):before{animation-delay:.3s;transform:translateX(6em)}.cat__segment:nth-of-type(17){transform:translate(-50%,-50%) rotate(1.3333333333deg)}.cat__segment:nth-of-type(17):before{animation-delay:.32s;transform:translateX(6em)}.cat__segment:nth-of-type(18){transform:translate(-50%,-50%) rotate(2.6666666667deg)}.cat__segment:nth-of-type(18):before{animation-delay:.34s;transform:translateX(6em)}.cat__segment:nth-of-type(19){transform:translate(-50%,-50%) rotate(4deg)}.cat__segment:nth-of-type(19):before{animation-delay:.36s;transform:translateX(6em)}.cat__segment:nth-of-type(20){transform:translate(-50%,-50%) rotate(5.3333333333deg)}.cat__segment:nth-of-type(20):before{animation-delay:.38s;transform:translateX(6em)}.cat__segment:nth-of-type(21){transform:translate(-50%,-50%) rotate(6.6666666667deg)}.cat__segment:nth-of-type(21):before{animation-delay:.4s;transform:translateX(6em)}.cat__segment:nth-of-type(22){transform:translate(-50%,-50%) rotate(8deg)}.cat__segment:nth-of-type(22):before{animation-delay:.42s;transform:translateX(6em)}.cat__segment:nth-of-type(23){transform:translate(-50%,-50%) rotate(9.3333333333deg)}.cat__segment:nth-of-type(23):before{animation-delay:.44s;transform:translateX(6em)}.cat__segment:nth-of-type(24){transform:translate(-50%,-50%) rotate(10.6666666667deg)}.cat__segment:nth-of-type(24):before{animation-delay:.46s;transform:translateX(6em)}.cat__segment:nth-of-type(25){transform:translate(-50%,-50%) rotate(12deg)}.cat__segment:nth-of-type(25):before{animation-delay:.48s;transform:translateX(6em)}.cat__segment:nth-of-type(26){transform:translate(-50%,-50%) rotate(13.3333333333deg)}.cat__segment:nth-of-type(26):before{animation-delay:.5s;transform:translateX(6em)}.cat__segment:nth-of-type(27){transform:translate(-50%,-50%) rotate(14.6666666667deg)}.cat__segment:nth-of-type(27):before{animation-delay:.52s;transform:translateX(6em)}.cat__segment:nth-of-type(28){transform:translate(-50%,-50%) rotate(16deg)}.cat__segment:nth-of-type(28):before{animation-delay:.54s;transform:translateX(6em)}.cat__segment:nth-of-type(29){transform:translate(-50%,-50%) rotate(17.3333333333deg)}.cat__segment:nth-of-type(29):before{animation-delay:.56s;transform:translateX(6em)}.cat__segment:nth-of-type(30){transform:translate(-50%,-50%) rotate(18.6666666667deg)}.cat__segment:nth-of-type(30):before{animation-delay:.58s;transform:translateX(6em)}@keyframes loop{from{transform:rotate(0) translateX(6em)}to{transform:rotate(-1turn) translateX(6em)}}.load-progress{position:relative;width:400px;height:20px;margin:0 auto;background:#eee}.load-progress-V{position:absolute;width:100vw;height:20px;top:75vh}.load-progress::after{content:"";position:absolute;top:0;left:0;width:0;height:100%;background:#6f8585;-webkit-animation:load-progress 2.5s linear infinite;animation:load-progress 2.5s linear infinite}@-webkit-keyframes load-progress{from{width:0}to{width:100%}}@keyframes load-progress{from{width:0}to{width:100%}}

b.css主要是做不同屏幕大小适配的,自己一点点调的,直接用就可以了。b.css文件夹下贴入如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
@media screen and (max-width:750px) and (min-width:500px){
.keyboard{
zoom: 0.7;

}
#post-comment{
margin-top:250px;
}
}
@media screen and (max-width:499px) and (min-width:380px){
.keyboard{
zoom: 0.5;

}
#post-comment{
margin-top:180px;
}
}
@media screen and (max-width:379px) and (min-width:349px){
.keyboard{
zoom: 0.45;

}
#post-comment{
margin-top:110px;
}
}
@media screen and (max-width:348px) and (min-width:308px){
.keyboard{
zoom: 0.4;

}
#post-comment{
margin-top:40px;
}
}
@media screen and (max-width:307px) and (min-width:280px){
.keyboard{
zoom: 0.35;
}
#post-comment{
margin-top:250px;
}
}
@media screen and (min-width:751px){
#post-comment{
margin-top:250px;
}

}
hr{
display: none;
}

h1{
text-align: center;
}

最后一步咯:

在.md文件里添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<div class="keyboard"> 
<div class="keyboard__front face-keyboard">
<div class="keyboard__f-top">
<div class="keyboard__speaker"></div>
<div class="keyboard__buttons">
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
</div>
<div class="keyboard__led">
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
<div class="keyboard__line">
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
<div class="keyboard__dot"></div>
</div>
</div>
<div class="keyboard__buttons">
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
<div class="keyboard__button"></div>
</div>
<div class="keyboard__speaker"></div>
</div>
<div class="keyboard__f-bottom">
<div class="key">
<div class="key__front face-key key__front-1"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-2"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-3"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-4"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-5"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-6"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-7"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-8"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-9"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-10"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-11"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-12"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-13"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-14"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-15"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-16"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-17"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-18"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-19"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-20"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key">
<div class="key__front face-key key__front-21"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-1">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-2">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-3">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-4">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-5">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-6">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-7">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-8">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-9">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-10">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-11">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-12">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-13">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
<div class="key key--black key--black-14">
<div class="key__front face-key"></div>
<div class="key__back face-key"></div>
<div class="key__right face-key"></div>
<div class="key__left face-key"></div>
<div class="key__top face-key"></div>
<div class="key__bottom face-key"></div>
</div>
</div>
</div>
<div class="keyboard__back face-keyboard"></div>
<div class="keyboard__right face-keyboard"></div>
<div class="keyboard__left face-keyboard"></div>
<div class="keyboard__top face-keyboard"></div>
<div class="keyboard__bottom face-keyboard"></div>
</div>

<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">

image-20211203125510572

大功告成啦。