howler+svg实现可弹奏有声音的吉他效果代码-html代码-BFW代码库

howler+svg实现可弹奏有声音的吉他效果代码

代码语言：html

所属分类：其他

代码描述：howler+svg实现可弹奏有声音的吉他效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	overflow-x: hidden;
	background: radial-gradient(circle, rgb(105, 166, 160), rgb(135, 196, 190));
	cursor:crosshair;
}
img, .guitarSVG{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height:100%;
}
.guitarSVG{
	z-index:2000000;
}
.guitar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 600px;
	min-width: 240px;
	user-select: none;
}
</style>


</head>

<body >
  <svg class="guitarSVG" viewBox="0 0 1256 3200">
	<filter id="f2" x="-100%" y="-100%" width="300%" height="300%">
      <feOffset result="offOut" in="SourceAlpha" dx="0" dy="-33" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
	<g class="guitarBody">
		<path d="M 626 1600 C 1135 1600 1116 1738 1055 2176 C 1035 2323 1721 3176 622 3194 C -465 3176 221 2323 201 2176 C 140 1738 121 1600 630 1600 Z" fill="rgb(47,20,20)" transform="translate(0 -50)"/>
		<path d="M 626 1600 C 1135 1600 1116 1738 1055 2176 C 1035 2323 1721 3176 622 3194 C -465 3176 221 2323 201 2176 C 140 1738 121 1600 630 1600 Z" fill="orange"/>
		<circle cx="628" cy="2072" r="156" fill="#222" />
		<circle cx="628" cy="2072" r="162" fill="none" stroke="#666" stroke-width="5" />
		<path d="M 390 2490 H 862 V 2570 H 798 Q 626 2635 454 2570 H 390 Z" />
		<path d="M484 2527 L 772 2513" stroke-width="10" stroke="tan" stroke-linecap="round" />
	</g>
	
	<g class="guitarNeck">
		<path d="M 530 1910 H 722 V 462 H 530 V 1910" fill="rgb(77,72,79)" />
		<path d="M .........完整代码请登录后点击上方下载按钮下载查看