纯css实现钢琴自动弹奏效果-html代码-BFW代码库

纯css实现钢琴自动弹奏效果

代码语言：html

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

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

<title> Piano keyboard</title>
<style>
  /* Variables */
/* Reset */
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transform-style: preserve-3d;
}

/* Generic */
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #B8ACFB;
}

.main {
  width: 800px;
  height: 600px;
  position: relative;
}

/*Base*/
.face-keyboard,
.face-key {
  position: absolute;
}

.keyboard {
  position: relative;
  left: 27%;
  top: 33%;
  transform-origin: bottom left;
  transform: perspective(10000px) rotateY(-16deg) rotateX(66deg) rotateZ(37deg);
  /**/
  /**/
}
.keyboard__front {
  width: 800px;
  height: 220px;
  transform: rotateY(0deg) translateZ(15px);
  background-color: #3F3B43;
}
.keyboard__back {
  width: 800px;
  height: 220px;
  transform: rotateY(180deg) translateZ(15px);
  background-color: #151514;
  box-shadow: 0px 25px 0 #6E68C5, -40px 5px 0 #6E68C5, -40px 25px 0 #6E68C5;
}
.keyboard__right {
  width: 30px;
  height: 220px;
  transform: rotateY(90deg) translateZ(785px);
  background-image: linear-gradient(to right, #1A191C 50%, #151514 50%);
}
.keyboard__left {
  width: 30px;
  height: 220px;
  transform: rotateY(-90deg) translateZ(15px);
  background-image: linear-gradient(to right, #1A191C 50%, #151514 50%);
}
.keyboard__top {
  width: 800px;
  height: 30px;
  transform: rotateX(90deg) translateZ(15px);
  background-color: #3F3B43;
}
.keyboard__bottom {
  width: 800px;
  height: 30px;
  transform: rotateX(-90deg) translateZ(205px);
  background-image: linear-gradient(to bottom, #1A191C 50%, #151514 50%);
}
.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(0.9deg);
  background-color: #3F3B43;
}
.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;
}
.keyboard__line {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 25px;
  padding: 0 1px;
  transform: rotateZ(180deg);
  overflow: hidden;
}
.keyboard__line:nth-of-type(1) {
  animation: line 1s ease-in alternate infinite 0.1s;
}
.keyboard__line:nth-of-type(2) {
  animation: line 1s ease-in alternate infinite 0.2s;
}
.keyboard__line:nth-of-type(3) {
  animation: line 1s ease-in alternate infinite 0.3s;
}
.keyboard__line:nth-of-type(4) {
  animation: line 1s ease-in alternate infinite 0.4s;
}
.keyboard__line:nth-of-type(5) {
  animation: line 1s ease-in alternate infinite 0.5s;
}
.keyboard__line:nth-of-type(6) {
  animation: line 1s ease-in alternate infinite 0.6s;
}
.keyboard__line:nth-of-type(7) {
  animation: line 1s ease-in alternate infinite 0.7s;
}
.keyboard__line:nth-of-type(8) {
  animation: line 1s ease-in alternate infinite 0.8s;
}
.keyboard__line:nth-of-type(9) {
 .........完整代码请登录后点击上方下载按钮下载查看