js+css实现电子吉他弹奏乐器效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：js+css实现电子吉他弹奏乐器效果代码，鼠标悬浮在音调按钮上可出声。

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

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

<head>
  <meta charset="UTF-8">
  
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  
  
  
<style>
nav {
  background-color: #221C44;
  height: 52px;
  font-family: "Roboto", sans-serif;
  color: #969DA2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  font-size: 14px;
  line-height: 17px;
  position: relative;
  z-index: 2;
}
nav .rewind {
  margin-left: 28px;
  height: 16px;
  cursor: pointer;
}
nav .play {
  margin-left: 24px;
  height: 24px;
  cursor: pointer;
}
nav .play-icon:hover path, nav .play-icon:hover rect,
nav .rewind-icon:hover path,
nav .rewind-icon:hover rect,
nav .pause-icon:hover path,
nav .pause-icon:hover rect {
  fill: #566574;
}
nav .pause-icon {
  display: none;
}
nav .controls {
  display: flex;
  align-items: center;
}
nav .social a {
  font-size: 24px;
  color: #A8B5C2;
  margin-left: 18px;
}
nav .social a:hover {
  color: #566574;
}

.loading {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
.loading .progress {
  transition: width 0.3s linear;
}

.notes {
  display: flex;
  height: 0;
  opacity: 0;
  transition: opacity 1s ease;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.notes .note {
  height: 132px;
}
.notes .note > div {
  height: 100%;
  width: 32px;
  border-radius: 16px;
  background-color: #D8D8D8;
  color: #541F5D;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 0;
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.16);
}
.notes .note:hover div {
  background-color: #FF6545;
  color: #fff;
}
.notes .note.key {
  height: 172px;
}
.notes .note.key > div {
  background-color: #ECDCCA;
}
.notes .note.key:hover > div {
  background-color: #FF6545;
  color: #fff;
}
.notes .note:not(:first-child) > div {
  margin-left: 8px;
}
.notes .note:not(:last-child) > div {
  margin-right: 8px;
}
.notes .note span {
  font-size: 0.7em;
}

.guitar {
  width: 96%;
  min-width: 772px;
  position: fixed;
  bottom: 0;
  right: 0;
}
.guitar.visible {
  transition: opacity 0.5s ease;
}
.guitar img {
  width: 100%;
  display: block;
  pointer-events: none;
}
.guitar .circle {
  background-image: url(//repo.bfw.wiki/bfwrepo/sound/guitar/switch.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 5vw;
  height: 5vw;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  position: absolute;
  right: 44.5%;
  top: 33.5%;
  cursor: pointer;
}
.guitar .circle.rock {
  background-position: 0 100%;
}
.guitar .circle.rock:before {
  color: #FFF;
}
.guitar .circle.rock:after {
  color: #C17CA4;
}
.guitar .circle:before, .guitar .circle:after {
  font-weight: 700;
  font-size: 12px;
  line-height: 13px;
  text-align: center;
  display: block;
  position: relative;
  transition: color 0.3s ease;
}
.guitar .circle:before {
  content: "ROCK";
  top: -14px;
  color: #C17CA4;
}
.guitar .circle:after {
  content: "BLUES";
  top: 100%;
  color: #FFF;
  position: absolute;
  width: 100%;
  margin-top: 2px;
}

body {
  background-image: url(//repo.bfw.wiki/bfwrepo/sound/guitar/bluesman_background.svg), linear-gradient(-180deg, #242150 5%, #572250 91%);
  background-size: cover;
  background-position: center;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto", sans-serif;
}
body * {
  user-select: none;
}

html,
body {
  height: 100%;
  min-width: 726px;
}
</style>


  
  
</head>

<body translate="no">
  <!--
design by: https://www.behance.net/vahanhovh
-->
<nav>
  <div class="controls">
    Backing track: Shuffle Blues in A
    <a class="rewind">
      <svg width="26" height="16" viewBox="160 18 26 16" xmlns="http://www.w3.org/2000/svg" class="rewind-icon"><path d="M173.3 26.143l12 6.857V18.778l-12 6.857v-6.857l-12.444 7.11L173.3 33v-6.857z" fill="#A8B5C3" fill-rule="evenodd"/></svg>
    </a>
    <a class="play">
      <svg width="21" height="24" viewBox="210 14 21 24" xmlns="http://www.w3.org/2000/svg" class="play-icon"><path fill="#A8B5C2" fill-rule="evenodd" d="M230.677 25.815L210 37.63V14"/></svg>
      <svg width="21px" height="24px" viewBox="210 14 21 24" xmlns="http://www.w3.org/2000/svg" class="pause-icon">
      <rect id="pause-1" fill="#A8B5C2" fill-rule="evenodd" x="210" y="14" width="7" height="24"></rect>
      <rect id="pause-2"  fill="#A8B5C2" fill-rule="evenodd" x="224" y="14" width="7" height="24"></rect>
    </svg>
    </a>
  </div>
  
</nav>

<div class="loading">
  <svg xmlns="http://www.w3.org/2000/svg" width="468" height="153" viewBox="166 91 468 153" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="a" d="M55.185 12.262c-.347.79-.546 1.666-.546 2.62 0 4.574-7.84 53.744-7.84 58.546 0 4.8-2.533 11.727 0 11.727 2.534 0 7.29 1.25 11.385-4.788 4.097-6.037 17.77-29.975 19.23-29.975 1.457 0-7.587 28.44-.427 29.975 4.607.99 11.635-3.858 16.48-8.035.96 5.18 4.9 8.22 13.818 8.22 12.986 0 22.383-13.286 22.383-13.286s.418-3.898-5.88 0c-6.298 3.897-4.258 4.342-15.55 6.068-5.856.895-6.797-2.81-6.797-7.433 0-.348.01-.712.03-1.088 3.232.077 12.677-2.964 14.942-4.124 2.67-1.366 2.08-6.77.455-11.34-.923-2.6-3.263-3.09-5.11-3.03-.186-.393-.76-.63-1.858-.63-4.007 0-13.592 7.772-15.904 17.514-2.3 3.564-5.817 7.81-7.944 7.81-3.366 0 8.153-26.21-3.07-29.058-11.224-2.846-23.298 22.52-24.8 23.84-1.5 1.32 8.156-48.312 8.156-53.375 0-.72-.008-1.335-.032-1.86 23.668-3.402 43.71-5.064 47.54-5.783C118.167 3.967 124.47 0 117.77 0c-6.698 0-69.834 4.218-88.825 8.207-18.99 3.99-26.468 6.64-26.468 6.64s-4.406 2.98-1.465 7.264c2.003 2.92 14.57-.838 31.063-4.904-1.912 10.082-5.225 32.205-5.225 37.298 0 6.254-1.285 25.32 0 27.04 1.284 1.72 7.134 2.55 7.134 2.55s2.74-18.423 4.41-24.52c1.673-6.095 5.42-38.66 5.42-43.82 0-.438-.05-.857-.143-1.256 3.752-.813 7.61-1.578 11.515-2.236zm47.16 47.12c.716-2.64 1.88-5.208 3.58-6.947 1.872-.27 6.04-1.18 7.043-1.18 1.18 0-1.666 4.308-4.883 6.612-1.822 1.304-4.04 1.548-5.74 1.514zm308.077.98c-3.754 4.996-9.936 12.48-13.515 11.07-5.393-2.128 0-23.466 0-24.174 0-.708-4.796 1.183-4.796 1.183s-10.757 21.35-11.752 22.213c-.994.863-2.053.954-2.053-.863 0-1.816 1.36-13.787 4.584-18.434 3.222-4.646 14.017-4.098 14.017-4.098s-1.107-2.823-4.796-2.823c-3.69 0-13.716 1.784-15.924 6.92-1.59 3.704-2.59 8.748-3.027 12.375-3.405 4.434-8.936 11.337-10.376 11.337-2.122 0 3.153-20.888-5.338-21.898-8.49-1.012-17.85 14.475-18.994 14.475-1.146 0 9.642-17.113-2.152-18.254-8.382-.81-16.238 17.294-16.946 17.4-.71.105.2-9.366 1.424-11.494 1.223-2.127.36-8.983-2.133-8.983s-5.02 1.976-5.992 3.078c-.325.37-.886 2.133-1.512 4.477-.006 0-.013.003-.02.005-1.787.448-8.053 4.868-11.753 7.556.016-6.705-.437-14.322-.437-15.153 0-1.4.905-1.3.905-2.878 0-1.58-3.283-2.717-3.283-2.717s-1.128.397-2.133.928c-1-.626-2.41-.473-4.163 2.36-3.704 5.993-16.807 27.328-28.098 29.054-5.858.895-6.8-2.81-6.8-7.433 0-.722.042-1.476.127-2.246 2.705.608 6.99 1.246 10.766.37 6.075-1.41 6.41-7.447 4.783-13.976-.952-3.817-3.634-4.266-5.697-3.98-.31-.243-.803-.383-1.52-.383-4.115 0-14.113 8.198-16.075 18.307-.157.813-.287 1.603-.385 2.367-2.808 3.068-6.123 6.123-8.195 6.123-4.162 0-1.923-12.285-.96-16.346.96-4.06 3.052-8.888-.867-8.888-1.1 0-2.13.316-3.043.772.125-.452.193-.732.193-.732s-2.312-.368-4.313 1.548c-2.002 1.916-11.73 22.404-14.072 22.404-2.343 0 2.113-18.69 3.02-20.43.91-1.74-1.256-5.44-3.273-5.44-2.018 0-5.27.057-7.424 3.7-2.153 3.64-9.613 28.076 1.482 29.856 7.366 1.18 13.472-9.378 17.287-16.94-1.346 6.808-1.316 14.448 5.376 15.013 5.68.48 10.806-2.43 14.667-5.69.624 5.798 4.48 9.24 13.967 9.24 8.812 0 21.748-16.698 29.155-27.435.44 3.67 1.39 11.16-.453 12.307-2.29 1.427-10.852 11.156-10.852 13.987 0 2.83 7.12 5.846 14.007 2.828 6.888-3.02 3.49-7.366 5.32-10.48.373-.633.616-1.988.768-3.76 2.86-1.804 7.654-5.13 10.338-7.012-.694 3.1-1.284 6.047-1.52 7.652-.63 4.242.956 11.83 5.817 11.83 4.86 0 11.666-5.806 12.492-8.598.826-2.792 7.683-12.927 7.683-12.927s-7.13 20.16 1.014 18.932c8.145-1.227 16.56-15.495 16.56-15.495s-3.793 16.692 5.912 18.893c6.495 1.473 12.594-5.326 15.918-9.985.65 2.29 2.2 4.478 5.82 4.96 5.757.767 11.875-16.112 11.875-17.35 0-1.238-1.168 9.45-1.168 12.843 0 3.393 3.64 6.622 7.015 6.622 3.13 0 8-3.485 12.017-6.898-.082 1.837-.905 5.614.288 6.25 1.254.67 2.1.034 3.71 1.024 1.61.99 5.336.628 5.336-1.062s9.778-20.095 10.96-20.095c1.182 0 .005 12.518.005 14.814 0 2.297-1.605 8.397 5.58 8.397 7.187 0 15.475-8.768 18.706-13.227 3.23-4.458 5.57-10.708 3.387-10.708-2.185 0-12.76 17.47-15.456 17.47-2.695 0-.667-7.944-.667-12.344 0-4.4.92-10.06-4.022-10.06-4.94 0-10.654-.732-12.85 4.664-2.196 5.397-4.435 7.706-4.435 7.706s1.557-9.286 2.298-11.815c.74-2.528-.092-5.317-1.798-4.433-1.707.884-6.938 1.25-7.603 2.646-.33.692-1.172 5.297-1.94 9.983zm-153.99-1.363c.92-2.733 2.464-5.25 4.772-6.75.15-.098.298-.2.445-.304 1.762-.64 3.81-1.418 4.603-1.418 1.507 0 .972 4.376-2.508 6.85-2.166 1.54-5.166 1.71-7.312 1.62zM148.527 77.516c-.032 4.315-.068 9.77.144 11.704.283 2.578-2.03.9-2.03.45s-1.774-.874-1.774-.01c0 .866-1.8-.763-1.965-1.688-.162-.926.528 2.883.528 2.883s-2.185-1.67-2.185-2.277c0-.606.402 2.11.2 2.194-.2.083-1.507.714-2.8.714-1.296 0-2.018 1.208-2.706-4.108-.........完整代码请登录后点击上方下载按钮下载查看