css布局实现老式大屁股集成电脑弹出键盘效果-html代码-BFW代码库

代码语言：html
代码描述：css布局实现老式大屁股集成电脑弹出键盘效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

/* Generic */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #1CB5BE;
  overflow: hidden;
  min-height: 300px;
  min-width: 400px;
  font-family: monospace;
  color: white;
  font-size: .6vmax;
}

.face {
  position: absolute;
}

/***************/
.main {
  width: 30vmax;
  height: 30vmax;
}

.minitel {
  position: relative;
  width: 26vmax;
  height: 30vmax;
  transform: perspective(10000px) rotateX(52deg) rotateZ(-46deg) scale(0.8) translateZ(-10vmax);
  transition: transform .5s ease;
  background-color: #175373;
  box-shadow: -5vmax -5vmax 0 #175373, -5vmax 0vmax 0 #175373, 0vmax -5vmax 0 #175373;
}
.minitel__b {
  width: 100%;
  height: 100%;
  background-color: #175373;
  position: relative;
  transform: translateZ(-1px);
}
.minitel::before, .minitel::after {
  content: '';
  position: absolute;
  left: -30%;
  bottom: 5%;
  width: 40%;
  height: 115%;
  transform: translateZ(-1px) skewY(10deg);
  background-color: #175373;
}
.minitel::after {
  height: 60%;
  width: 40%;
  top: -30%;
  transform: skewY(10deg);
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
}

/******************/
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: 130px;
  height: 30px;
  z-index: 10000;
  transform: translateX(-50%) translateZ(10000px);
  font-size: 12px;
  letter-spacing: .5px;
  background-color: #006E85;
  color: white;
  cursor: pointer;
  transition: hover .35s ease;
}
@media (min-width: 830px) {
  .button {
    left: calc(100% - 180px);
    transform: translateZ(10000px);
  }
}
.button:hover {
  background-color: #175373;
  transition: .35s ease;
}

.text {
  word-break: break-all;
}

.cursor {
  display: inline-block;
  width: .75vmax;
  margin-left: .25vmax;
  border-bottom: .2vmax solid white;
  animation: cursor 1s ease infinite;
}

.led {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: .5vmax;
  width: .5vmax;
  transform: translateX(-50%);
  background-color: #574C65;
  border-radius: 50%;
  transition: 2s ease;
}

.screen {
  position: absolute;
  top: 2vmax;
  left: 2vmax;
  width: 22vmax;
  height: 14vmax;
  transform: translateZ(2vmax);
  overflow: hidden;
  padding: 3.2vmax 3vmax;
  font-size: 1vmax;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: .2vmax;
  background-color: #006E85;
  box-shadow: inset 0.5vmax 0.5vmax 0.5vmax #175373, inset -0.5vmax -0.5vmax 0.5vmax #175373;
}
.screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 180%;
  height: 24%;
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, #175373, rgba(23, 83, 115, 0.3));
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.screen::after {
  content: '';
  position: absolute;
  top: 26%;
  left: 12%;
  width: 25%;
  height: 65%;
  border-radius: .4vmax;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.045), transparent);
}
.screen__shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10%;
  background-image: linear-gradient(to top, rgba(87, 76, 101, 0.2), rgba(127, 108, 120, 0.5), rgba(127, 108, 120, 0.3));
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  filter: blur(0.3vmax);
  transition: 2s ease;
}

/*********************/
.keys {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  position: absolute;
  top: 7%;
  left: 5%;
  width: 90%;
  height: 86%;
  transform: translateZ(-0.25vmax);
  transition: transform .1s ease;
}
.keys .key-column:nth-of-type(1) {
  width: 75%;
}
.keys .key-column:nth-of-type(3) {
  margin-left: 1vmax;
}
.keys .key-column:nth-of-type(4) {
  margin-left: .5vmax;
}

.key {
  width: 1.2vmax;
  height: 0.4vmax;
  position: relative;
  bottom: 0;
}
.key__front {
  width: 1.2vmax;
  height: 0.5vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.3vmax);
}
.key__back {
  width: 1.2vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1.2vmax) translateY(-0.5vmax);
}
.key__right {
  width: 0.8vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.2vmax) translateX(-0.8vmax) translateY(-0.5vmax);
}
.key__left {
  width: 0.8vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vmax);
}
.key__top {
  width: 1.2vmax;
  height: 0.8vmax;
  transform-origin: top left;
  transform: translateZ(0.5vmax);
}
.key__bottom {
  width: 1.2vmax;
  height: 0.8vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1.2vmax);
}
.key-column {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 70%;
  height: 1vmax;
  margin-top: .4vmax;
}
.key-numbers {
  position: absolute;
  bottom: 8%;
  right: 7%;
  height: 27%;
  width: 15%;
  transform: translateZ(-0.25vmax);
}
.key-numbers .key-column {
  width: 100%;
  margin-top: 0vmax;
  align-items: flex-end;
}
.key__front {
  background-color: #71606b;
}
.key__back {
  background-color: #71606b;
}
.key__right {
  background-color: #ac8b83;
}
.key__left {
  background-color: #4a4156;
}
.key__top {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ac8b83;
}
.key__bottom {
  background-color: #4a4156;
}

.key-nb {
  width: 1vmax;
  height: 0.3vmax;
  position: relative;
  bottom: 0;
}
.key-nb__front {
  width: 1vmax;
  height: 0.5vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.1vmax);
}
.key-nb__back {
  width: 1vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-1vmax) translateY(-0.5vmax);
}
.key-nb__right {
  width: 0.6vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vmax) translateX(-0.6vmax) translateY(-0.5vmax);
}
.key-nb__left {
  width: 0.6vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vmax);
}
.key-nb__top {
  width: 1vmax;
  height: 0.6vmax;
  transform-origin: top left;
  transform: translateZ(0.5vmax);
}
.key-nb__bottom {
  width: 1vmax;
  height: 0.6vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-1vmax);
}
.key-nb__front {
  background-color: #706282;
}
.key-nb__back {
  background-color: #71606b;
}
.key-nb__right {
  background-color: #ac8b83;
}
.key-nb__left {
  background-color: #4a4156;
}
.key-nb__top {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #978aa7;
  color: white;
  font-size: .7vmax;
}
.key-nb__bottom {
  background-color: #4a4156;
}

.key-s {
  width: 5vmax;
  height: 0.4vmax;
  position: relative;
  bottom: 0;
}
.key-s__front {
  width: 5vmax;
  height: 0.5vmax;
  transform-origin: bottom left;
  transform: rotateX(-90deg) translateZ(0.3vmax);
}
.key-s__back {
  width: 5vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateX(-90deg) rotateY(180deg) translateX(-5vmax) translateY(-0.5vmax);
}
.key-s__right {
  width: 0.8vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateY(90deg) rotateZ(-90deg) translateZ(5vmax) translateX(-0.8vmax) translateY(-0.5vmax);
}
.key-s__left {
  width: 0.8vmax;
  height: 0.5vmax;
  transform-origin: top left;
  transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vmax);
}
.key-s__top {
  width: 5vmax;
  height: 0.8vmax;
  transform-origin: top left;
  transform: translateZ(0.5vmax);
}
.key-s__bottom {
  width: 5vmax;
  height: 0.8vmax;
  transform-origin: top left;
  transform: rotateY(180deg) translateX(-5vmax);
}
.key-s__front {
  background-color: #71606b;
}
.key-s__back {
  background-color: #71606b;
}
.key-s__right {
  background-color: #ac8b83;
}
.key-s__left {
.........完整代码请登录后点击上方下载按钮下载查看