react+css实现逼真立体数字键盘按压效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：react+css实现逼真立体数字键盘按压效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<link href="https://fonts.googleapis.com/css2?family=BioRhyme:wght@700&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
  
<style>
html, body {
  width: 100%;
  height: 100%;
  font-family: "BioRhyme", serif;
  background: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 300rem;
}

.keyboard {
  transform: rotateX(60deg) rotateZ(45deg);
  transform-style: preserve-3d;
  background: #1e293b;
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: inset 1rem 1rem 0 0.4rem #94a3b8;
  display: flex;
  gap: 0 2rem;
}
.keyboard .shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 5rem;
  background-image: linear-gradient(90deg, #94a3b8 50%, #cbd5e1);
  transform: rotateX(90deg) rotateX(14deg) translateX(10rem) translateY(-6rem) translateZ(-39rem);
  filter: blur(0.5rem);
}
.keyboard .cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border-radius: 2rem;
  box-shadow: inset -0.3rem -0.3rem 0.1rem 0.2rem #f1f5f9, inset -1rem -1rem 0 0.4rem #cbd5e1, inset -2rem -2rem 2rem -0.6rem #64748b, 0 0 #e2e8f0, 0.3rem 0.3rem #e2e8f0, 0.6rem 0.6rem #e2e8f0, 0.9rem 0.9rem #e2e8f0, 1.2rem 1.2rem #e2e8f0, 1.5rem 1.5rem #e2e8f0, 1.8rem 1.8rem #e2e8f0, 2.1rem 2.1rem #e2e8f0, 2.4rem 2.4rem #e2e8f0, 2.7rem 2.7rem #e2e8f0, 3rem 3rem #e2e8f0, 3.3rem 3.3rem #e2e8f0, 3.6rem 3.6rem #e2e8f0, 3.9rem 3.9rem #e2e8f0, 4.2rem 4.2rem #e2e8f0, 4.5rem 4.5rem #e2e8f0, 4.8rem 4.8rem #e2e8f0, 5.1rem 5.1rem #e2e8f0, 5.4rem 5.4rem #e2e8f0, 5.7rem 5.7rem #e2e8f0, 6rem 6rem #e2e8f0, 6.3rem 6.3rem #e2e8f0, 6.6rem 6.6rem #e2e8f0, 6.9rem 6.9rem #e2e8f0, 7.2rem 7.2rem #e2e8f0, 7.5rem 7.5rem #e2e8f0, 8rem 10rem 2rem rgba(15, 23, 42, 0.2), 8rem 8rem 0.5rem rgba(15, 23, 42, 0.2);
}

.row {
  display: flex;
  gap: 0 2rem;
}
.row:not(:first-child) {
  filter: drop-shadow(2rem -0.5rem 0.5rem rgba(51, 65, 85, 0.3));
}
.row:not(:first-child) .key:not(:first-child) {
  filter: drop-shadow(-0.5rem 0.5rem 0.5rem rgba(51, 65, 85, 0.3));
}
.row > .key.span {
  flex: 1;
}
.row > .key.span .side {
  width: 120%;
  height: 237%;
  transform: rotateZ(45deg) translate(24%, -14%) skew(337deg);
  background-image: linear-gradient(#f1f5f9 25%, #cbd5e1 30%);
}
.row > .key.span .top::before {
  transform: translate(5%, 5%);
}
.row > .key.span .top::after {
  background-image: linear-gradient(-25deg, transparent 45%, #e2e8f0 55%);
}

.column {
  display: flex;
  flex-direction: column;
  gap: 2rem 0;
}
.column > .key.span {
  flex: 1;
}
.column > .key.span .side {
  width: 220%;
  height: 103%;
  transform: rotateZ(45deg) translate(27%, 17%) skew(22deg);
  background-image: linear-gradient(#fbd38d 70%, #ed8936 75%);
}
.column > .key.span .top::before {
  background-color: #f6ad55;
  transform: translate(5%, 5%);
}
.column > .key.span .top::after {
  background-image: linear-gradient(291deg, transparent 45%, #f6ad55 50%);
}
.column:not(:first-child) {
  filter: drop-shadow(-0.5rem 0.5rem 0.5rem rgba(51, 65, 85, 0.3));
}

.key {
  position: relative;
  width: 6rem;
  height: 6rem;
  transform: translateX(-3rem) translateY(-3rem);
  transform-style: preserve-3d;
  user-select: none;
  transition: transform 0.1s ease-out;
}
.key.active {
  transform: translateX(-1rem) translateY(-1rem);
}
.key .char {
  position: absolute;
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #64748b;
  text-shadow: 0.05rem 0rem 0 #94a3b8, 0.05rem 0.1rem 0 #0f172a, 0.1rem 0.05rem 0 #94a3b8, 0.1rem 0.15rem 0 #0f172a, 0.15rem 0.1rem 0 #94a3b8, 0.15rem 0.2rem 0 #0f172a, 0.2rem 0.15rem 0 #94a3b8, 0.2rem 0.25rem 0 #0f172a, 0.25rem 0.2rem 0 #94a3b8, 0.25rem 0.3.........完整代码请登录后点击上方下载按钮下载查看