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

NEU键盘布局点击效果

代码语言：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.3166666.........完整代码请登录后点击上方下载按钮下载查看