NEU键盘布局点击效果-html代码-BFW代码库

代码语言：html
代码描述：NEU键盘布局点击效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.keyboard {
  display: grid;
  grid-template-columns: repeat(30, 1.9vw);
  grid-template-rows: repeat(5, 4.75vw);
  grid-gap: 0.95vw;
  background: #c2ccdb;
  padding: 1.727272727272727vw;
  border-radius: 1.266666666666667vw;
  background: #d8dee8;
  box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
}
.keyboard .key {
  border-radius: 0.76vw;
  grid-column: auto/span 2;
  width: 100%;
  height: 100%;
  padding: 0.475vw;
  font-size: 1.9vw;
  display: grid;
  align-items: center;
  color: #8a94a4;
  justify-content: center;
  cursor: pointer;
  background: #d8dee8;
  box-shadow: -0.316666666666667vw -0.316666666666667vw 0.95vw #f3f5f8, 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
  transition: all 100ms cubic-bezier(0.09, 0.32, 0.34, 2);
  user-select: none;
}
.keyboard .key:hover,
.keyboard .key.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f6f8fa, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c2ccdb;
  color: #fff;
  text-shadow: 0 0 10px #f7f9fa, 0 0 15px #f7f9fa, 0 0 20px #f7f9fa;
}
.keyboard .key.dotted {
  position: relative;
}
.keyboard .key.dotted::before {
  content: '_';
  font-weight: bold;
  color: #b5c0d2;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.keyboard .key.esc {
  background: #ed4c67;
  color: #fbdbe1;
}
.keyboard .key.esc:hover,
.keyboard .key.esc.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f38e9f, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c71432;
  color: #fff;
  text-shadow: 0 0 10px #f59eac, 0 0 15px #f59eac, 0 0 20px #f59eac;
}
.keyboard .key.back {
  background: #d63031;
  color: #f7d6d6;
}
.keyboard .key.back:hover,
.keyboard .key.back.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #e57c7d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #991e1f;
  color: #fff;
  text-shadow: 0 0 10px #e88f90, 0 0 15px #e88f90, 0 0 20px #e88f90;
}
.keyboard .key.shift {
  background: #1e90ff;
  color: #d2e9ff;
}
.keyboard .key.shift:hover,
.keyboard .key.shift.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #71b9ff, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0065c8;
  color: #fff;
  text-shadow: 0 0 10px #85c3ff, 0 0 15px #85c3ff, 0 0 20px #85c3ff;
}
.keyboard .key.control {
  background: #be2edd;
  color: #f2d5f8;
}
.keyboard .key.control:hover,
.keyboard .key.control.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #d57be9, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #891aa1;
  color: #fff;
  text-shadow: 0 0 10px #db8eec, 0 0 15px #db8eec, 0 0 20px #db8eec;
}
.keyboard .key.win {
  background: #f7b731;
  color: #fdf1d6;
}
.keyboard .key.win:hover,
.keyboard .key.win.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fad17d, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #c78908;
  color: #fff;
  text-shadow: 0 0 10px #fad890, 0 0 15px #fad890, 0 0 20px #fad890;
}
.keyboard .key.alt {
  background: #5352ed;
  color: #dddcfb;
}
.keyboard .key.alt:hover,
.keyboard .key.alt.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #9291f3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #1615ca;
  color: #fff;
  text-shadow: 0 0 10px #a2a1f5, 0 0 15px #a2a1f5, 0 0 20px #a2a1f5;
}
.keyboard .key.fn {
  background: #26de81;
  color: #d4f8e6;
}
.keyboard .key.fn:hover,
.keyboard .key.fn.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #76eaaf, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #189e5a;
  color: #fff;
  text-shadow: 0 0 10px #8aedbb, 0 0 15px #8aedbb, 0 0 20px #8aedbb;
}
.keyboard .key.cap {
  background: #ee5a24;
  color: #fcded3;
  position: relative;
}
.keyboard .key.cap:hover,
.keyboard .key.cap.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #f49675, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #b23a0e;
  color: #fff;
  text-shadow: 0 0 10px #f6a588, 0 0 15px #f6a588, 0 0 20px #f6a588;
}
.keyboard .key.cap::before {
  content: '';
  position: absolute;
  width: 0.5vw;
  height: 0.5vw;
  background: #f6ac91;
  top: 1vw;
  right: 1vw;
  border-radius: 50%;
}
.keyboard .key.cap.on::before {
  background: #fbded3;
  box-shadow: 0 0 0.5vw 0.2vw rgba(255,255,255,0.8);
}
.keyboard .key.tab {
  background: #12cbc4;
  color: #cafaf8;
}
.keyboard .key.tab:hover,
.keyboard .key.tab.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #5aede7, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #0d8e89;
  color: #fff;
  text-shadow: 0 0 10px #72f0eb, 0 0 15px #72f0eb, 0 0 20px #72f0eb;
}
.keyboard .key.enter {
  background: #fdcb6e;
  color: #fff5e2;
}
.keyboard .key.enter:hover,
.keyboard .key.enter.pressed {
  transform: perspective(300px) scale(0.97);
  box-shadow: inset -0.316666666666667vw -0.316666666666667vw 0.95vw -0.158333333333333vw #fddea3, inset 0.316666666666667vw 0.316666666666667vw 0.633333333333333vw #fba403;
  color: #fff;
  text-shadow: 0 0 10px #fde2b0, 0 0 15px #fde2b0, 0 0 20px #fde2b0;
}
.keyboard .key.s2 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 2;
}
.keyboard .key.s3 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 3;
}
.keyboard .key.s4 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 4;
}
.keyboard .key.s5 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 5;
}
.keyboard .key.s6 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 6;
}
.keyboard .key.s12 {
  font-size: 1.727272727272727vw;
  grid-column: auto/span 12;
}
.keyboard .key[on-shift] {
  font-size: 1.461538461538461vw;
  justify-items: center;
}
.keyboard .key[on-shift]::before {
  content: attr(on-shift);
  align-items: end;
}
@import url("https://fonts.googleapis.com/css2?family=Sen:wght@700&display=swap");
* {
  box.........完整代码请登录后点击上方下载按钮下载查看