tonejs实现一个卡通钢琴弹奏交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：tonejs实现一个卡通钢琴弹奏交互效果代码

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


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

<head>

  <meta charset="UTF-8">
  

<style>
@import url("https://fonts.googleapis.com/css2?family=Pragati+Narrow:wght@400;700&display=swap");
* {
  font-family: 'Pragati Narrow', sans-serif !important;
}

:root {
  --keyboard-mode: #FF6B6B;
  background: #4ECDC4;
  overflow: hidden;
}

.container {
  display: flex;
  justify-content: center;
  height: 100%;
}

.keyandnote {
  margin: 0 auto;
  position: absolute;
  bottom: 20%;
}

.keyboard {
  font-size: 12px;
  font-weight: 400;
  display: inline-table;
  padding: 24px;
  border-radius: 20px 20px 40px 40px;
  background: var(--keyboard-mode);
  min-width: 884px;
}
.keyboard button {
  outline: none;
  transition: all 100ms ease-out;
  margin: 0px;
  padding: 0px;
  border: none;
  color: rgba(26, 83, 92, 0.5);
  border-radius: 20px 20px 40px 40px;
  cursor: none;
}
.keyboard button.white {
  background: #F7FFF7;
  width: 40px;
  height: 140px;
  box-shadow: inset #E6F1E6 0 -10px 0 0;
  padding-top: 80px;
  margin: 1px;
}
.keyboard button.white:active {
  box-shadow: inset #E6F1E6 0 -2px 0 0;
  transform: translate(0, 4px);
  height: calc($keyboard-white-height - 8px);
}
.keyboard button.black {
  background: #1A535C;
  width: 32px;
  height: 90px;
  z-index: 99;
  position: absolute;
  transform: translate(-16px, -10px);
  box-shadow: inset #073B4C 0 -10px 0 0, var(--keyboard-mode) 0 0 0 2px;
}
.keyboard button.black:active {
  transform: translate(-16px, -2px);
  height: calc($keyboard-black-height - 8px);
  box-shadow: inset #073B4C 0 -2px 0 0, var(--keyboard-mode) 0 0 0 2px;
}

#notes {
  position: absolute;
  bottom: 160px;
}
#notes span {
  border-radius: 100px;
  position: absolute;
  z-index: -1;
  transform-origin: center bottom;
}
#notes span.user {
  background: var(--note-user);
  height: 40px;
}
#notes span.system {
  background: var(--note-system);
}
#notes span svg {
  width: 100%;
}

#paw {
  transform: scale(1.2);
  z-index: 999;
  position: absolute;
  bottom: -120px;
  left: 500px;
  transform: translate(-50%, 0);
  pointer-events: none;
  transition: bottom 100ms ease, left 50ms ease, transform 100ms ease-out;
}
#paw svg {
  display: none;
}
#paw.up {
  transform: translate(-50%, 0);
}
#paw.up #open {
  display: block;
}
#paw.down {
  transform: translate(-50%, 8px);
}
#paw.down #close {
  display: block;
}
</style>



</head>

<body translate="no" >
  <div class="container">
  <div class="keyandnote">
    <div id="notes"></div>
    <div class="keyboard" onmousemove="showCoords(event)" onmouseout="clearCoor()">
      <!--     <button class="white" data-note="A2">A2</button>
    <button class="black" data-note="A#2"></button>
    <button class="white" data-note="B2">B2</button> -->
      <button class="white" data-key="C3">C3</button>
      <button class="black" data-key="C#3"></button>
      <button class="white" data-key="D3">D3</button>
      <button class="black" data-key="D#3"></button>
      <button class="white" data-key="E3">E3</button>
      <button class="white" data-key="F3">F3</button>
      <button class="black" data-key="F#3"></button>
      <button class="white" data-key="G3">G3</button>
      <button class="black" data-key="G#3"></button>
      <button class="white" data-key="A3">A3</button>
      <button class="black" data-key="A#3"></button>
      <button class="white" data-key="B3">B3</button>
      <button class="white" data-key="C4">C4</button>
      <button class="black" data-key="C#4"></button>
      <button class="white" data-key="D4">D4</button>
      <button class="black" data-key="D#4"></button>
      <button class="white" data-key="E4">E4</button>
      <button class="white" data-key="F4">F4</button>
      <button class="black" data-key="F#4"></button>
      <button class="white" data-key="G4">G4</button>
      <button class="black" data-key="G#4"></button>
      <button class="white" data-key="A4">A4</button>
      <button class="black" data-key="A#4"></button>
      <button class="white" data-key="B4">B4</button>
      <button class="white" data-key="C5">C5</button>
      <button class="black" data-key="C#5"></button>
      <button class="white" data-key="D5">D5</button>
      <button class="black" data-key="D#5"></button>
      <button class="white" data-key="E5">E5</button>
      <button class="white" data-key="F5">F5</button>
      <button class="black" data-key="F#5"></button>
      <button class="white" data-key="G5">G5</button>
      <button class="black" data-key="G#5"></button>
      <button class="white" data-key="A5">A5</button>
      <button class="black" data-key="A#5"></button>
      <button class="white" data-key="B5">B5</button>
      <!--     <button class="white" data-key="C6">C6</button>
    <button class="black" data-key="C#6"></button>
    <button class="white" data-key="D6">D6</button> -->
    </div>
  </div>

</div>
<span id="paw" class="up">
  <svg id="close" width="62" height="155" viewBox="0 0 62 155" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16.8211 45.4678C22.133 56.7758 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFE66D" />
    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C22.133 56.7759 14.8026 120.174 14.9088 135.074C14.9088 161.21 52.7296 155.876 52.7296 137.527C52.6234 125.081 46.8865 68.5106 51.7735 41.8407C55.3527 22.3079 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.1981 25.0494 23.8328 27.8657M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 19.6514 32.9693 24.772M45.6117 16.0243C45.8596 19.2247 45.9729 26.0735 44.443 27.8657" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    <path d="M16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243C44.5493 7.80997 34.8816 7.1699 32.9693 12.1838C28.7198 6.63651 21.3894 12.1838 21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678Z" fill="#FFFCEB" />
    <path d="M21.3894 16.771C10.7655 16.771 11.4086 33.9457 16.8211 45.4678C19.2818 50.7061 24.7796 51.0824 28.3878 52.1918C31.9959 53.3013 41.4408 52.9347 44.443 51.0245C47.4453 49.1143 50.8479 48.1592 51.7735 41.8407C54.6519 22.1924 52.5172 17.3044 45.6117 16.0243M21.3894 16.771C21.3894 12.1838 28.7198 6.63651 32.9693 12.1838M21.3894 16.771C21.1061 19.2958 21.5081 22.8449 24.1429 25.6612M32.9693 12.1838C34.8816 7.1699 44.5493 7.80997 45.6117 16.0243M32.9693 12.1838C33.3589 14.2463 33.9043 17.7814 32.9693 22.902M45.6117 16.0243C45.8596 19.2247 45.9729 24.8241 44.443 26.6163" stroke="#FFD166" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M49.8789 64.5665C49.8606 64.5085 49.8424 64.4516 49.8245 64.3959C48.9048 66.5184 44.9641 71.3363 36.5592 73.6286C27.323 76.1475 33.2602 77.1902 36.1283 77.6938C36.5226 77.7631 36.8589 77.8222 37.0898 77.8735C38.7859 78.2504 46.6733 77.7906 49.8316 76.2714C49.7862 72.2899 49.796 68.3608 49.8789 64.5665ZM50.453 96.6602C47.5495 98.0283 43.3229 99.6052 38.7467 100.248C30.3622 101.426 40.5808 104.425 42.546 104.961C43.9052 105.331 47.5838 105.651 50.8934 105.316C50.738 102.504 50.5886 99.6067 50.453 96.6602ZM51.5744 116.758C46.7425 118.57 38.9895 120.343 28.5281 120.17C15.0343 119.948 32.7536 125.083 36.1266 125.954C39.7218 126.882 46.5969 127.252 52.2118 126.821C52.1108 125.193 51.9993 123.445 51.8813 121.595C51.7827 120.05 51.6797 118.434 51.5744 116.758ZM16.228 111.984C20.6373 113.202 28.8524 113.554 30.7553 113.208C31.0402 113.157 31.4552 113.097 31.9418 113.027L31.9421 113.027L31.9423 113.027C35.4829 112.519 42.8124 111.466 31.4103 108.924C23.9882 107.269 19.386 104.31 16.9517 101.975C16.7414 104.946 16.5291 107.856 16.325 110.654C16.2925 111.101 16.2601 111.544 16.228 111.984ZM17.6828 91.1044C22.4686 91.8881 29.3754 91.5642 32.7388 90.502C35.4711 89.6392 49.8245 84.5513 38.8939 84.7714C28.8401 84.9739 21.8743 82.4636 18.2844 80.3947C18.1146 83.91 17.9085 87.5077 17.6828 91.1044ZM18.6817 69.6218C21.6803 70.5551 26.1354 70.1698 27.5388 69.702C29.1306 69.1714 37.4082 66.2 30.6163 65.0326C25.........完整代码请登录后点击上方下载按钮下载查看