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 462 345 L 562 325 M 462 231 L 562 211 M 462 112 L 562 92 M 790 345 L 690 325 M 790 231 L 690 211 M 790 112 L 690 92" stroke="rgb(100,100,100)" stroke-width="14"/>
<g class="dots" fill="rgba(180,180,180)">
<circle cx="626" cy="934" r="10" />
<circle cx="575" cy="1102" r="10" />
<circle cx="677" cy="1102" r="10" />
<circle cx="626" cy="1259" r="10" />
<circle cx="575" cy="1456" r="10" />
<circle cx="677" cy="1456" r="10" />
<circle cx="626" cy="1625" r="10" />
<circle cx="626" cy="1720" r="10" />
</g>
<g class="tuners" fill="rgb(130,130,130)">
<circle cx="462" cy="345" r="26" />
<circle cx="462" cy="231" r="26" />
<circle cx="462" cy="112" r="26" />
<circle cx="790" cy="345" r="26" />
<circle cx="790" cy="231" r="26" />
<circle cx="790" cy="112" r="26" />
</g>
<path d="M 530 458 H 722 Q 745 414 746 400 L 766 60 Q 769 7 717 7 H 535 Q 487 7 490 60 L 506 400 Q 507 414 530 458 Z" fill="rgb(47,20,20)"/>
<path d="M 528 455 H 724" stroke-width="14" stroke="tan" stroke-linecap="round" />
<path class="frets" d="M 530 580 H 722 M 530 695 H 722 M 530 791 H 722 M 530 891 H 722 M 530 976 H 722 M 530 1064 H 722 M 530 1145 H 722 M 530 1223 H 722 M 530 1293 H 722 M 530 1364 H 722 M 530 1426 H 722 M 530 1485 H 722 M 530 1545 H 722 M 530 1600 H 722 M 530 1648 H 722 M 530 1696 H 722 M 530 1744 H 722 M 530 1785 H 722 M 530 1825 H 722 M 530 1866 H 722" stroke-width="5" stroke="tan" stroke-linecap="round" />
</g>
<g class="strings" fill="none" stroke-width="7" stroke="#fff">
<path class="string1" d="M 542 2560 Q 542 1507 542 455 L 567 325">
<animate class="string" attributeName="d" values="M 542 2560 Q 542 1507 542 455 L 567 325" begin="indefinite" dur="0.5s" repeatCount="none" />
</path>
<path class="string2" d="M 576 2559 Q 576 1507 576 455 L 567 211">
<animate class="string" attributeName="d" values="M 576 2559 Q 576 1507 576 455 L 567 211" begin="indefinite" dur="0.5s" repeatCount="none" />
</path>
<path class="string3" d="M 610 2557 Q 610 1507 610 455 L 567 92">
<animate class="string" attributeName="d" values="M 610 2557 Q 610 1507 610 455 L 567 92" begin="indefinite" dur="0.5s" repeatCount="none" />
</path>
<path class="string4" d="M 642 2555 Q 642 1507 642 455 L 685 92">
<animate class="string" attributeName="d" values="M 642 2555 Q 642 1507 642 455 L 685 92" begin="indefinite" dur="0.5s" repeatCount="none" />
</path>
<path class="string5" d="M 676 2553 Q 676 1507 676 455 L 685 211">
<animate class="string" attributeName="d" values="M 676 2553 Q 676 1507 676 455 L 685 211" begin="indefinite" dur="0.5s" repeatCount="none" />
</path>
<path class="string6" d="M 710 2550 Q 710 1507 710 455 L 685 325">
<animate class="string" attributeName="d" values="M 710 2550 Q 710 1507 710 455 L 685 325" begin="indefinite" dur="0.5s" repeatCount="none" />
</path>
</g>
<g class="stringDots" fill="silver">
<g class="topDots">
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0