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

代码语言：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) {
  animation: line 1s ease-in alternate infinite 0.9s;
}
.keyboard__line:nth-of-type(10) {
  animation: line 1s ease-in alternate infinite 1s;
}
.keyboard__dot {
  height: 6px;
  width: 6px;
  flex-shrink: 0;
  background-color: rgba(21, 21, 20, 0.3);
}
.keyboard__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 60px;
  height: 80px;
  margin: 0 40px;
  padding: 5px 0;
}
.keyboard__button {
  height: 20px;
  width: 20px;
  margin: 0 3px;
  box-shadow: 4px 4px 0 #151514;
  background-color: #3CFBFE;
}
.keyboard__button:nth-of-type(2) {
  animation: button-1 1s infinite;
}
.keyboard__button:nth-of-type(3) {
  animation: button-1 2s infinite reverse;
}
.keyboard__button:nth-of-type(5) {
  animation: button-2 2s infinite;
}
.keyboard__button:nth-of-type(6) {
  animation: button-3 1.5s infinite;
}
.keyboard__speaker {
  width: 70px;
  height: 70px;
  background-color: #1A191C;
  border-radius: 50%;
  margin-bottom: 5px;
  background-image: radial-gradient(#1A191C 3px, transparent 3px);
  background-color: #3F3B43;
  background-position: 0 0, 4px 4px;
  background-size: 10px 10px;
}
.keyboard__f-bottom {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 630px;
  height: 120px;
  margin: 0 auto;
  padding-top: 1px;
  background-color: #FFFFFF;
}

.key {
  position: relative;
  width: 30px;
  z-index: 1000;
}
.key:nth-of-type(1) {
  animation: key-down-white 0.5s infinite alternate 0.0666666667s;
}
.key:nth-of-type(2) {
  animation: key-down-white 0.5s infinite alternate 0.1333333333s;
}
.key:nth-of-type(3) {
  animation: key-down-white 0.5s infinite alternate 0.2s;
}
.key:nth-of-type(4) {
  animation: key-down-white 0.5s infinite alternate 0.2666666667s;
}
.key:nth-of-type(5) {
  animation: key-down-white 0.5s infinite alternate 0.3333333333s;
}
.key:nth-of-type(6) {
  animation: key-down-white 0.5s infinite alternate 0.4s;
}
.key:nth-of-type(7) {
  animation: key-down-white 0.5s infinite alternate 0.4666666667s;
}
.key:nth-of-type(8) {
  animation: key-down-white 0.5s infinite alternate 0.5333333333s;
}
.key:nth-of-type(9) {
.........完整代码请登录后点击上方下载按钮下载查看

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

网友评论0

three+gsap实现炫酷三维蜜蜂跟随页面滚动动画交互网页代码

css+js实现文字霓虹灯效果代码

div+css布局实现文字书架排列效果代码

css+div布局实现led灯开关点击打开关闭checkbox效果代码

css实现图片左上角文字阶梯换行布局代码

div+css布局实现立体质感阴影tab键盘按键效果代码

css布局实现图片不规则形状裁剪显示代码

css+js实现Cicada Principle（蝉原则）布局代码

css+js布局实现健身类app ui界面交互效果代码

css+js实现卡通板球昆虫网格布局效果代码