html5 svg电吉他弹奏特效代码下载


html5 svg电吉他弹奏特效代码下载
html5 svg电吉他弹奏特效代码下载以及电吉他弹奏等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/gsap.min.js'></script>
<script src='js/MotionPathPlugin.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="scene">
<div class="slash-container">
  <div class="shock one"></div>
  <div class="shock two"></div>
  <div id="dust-particles" class="dust-container"></div>
  <svg id="slash" viewBox="0 0 450 500">
    <g transform="translate(-62,-11)">
      <g id="right-leg">
        <rect transform="rotate(-90)" x="-455" y="130" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
        <rect transform="rotate(46)" x="396" y="70" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
        <path d="m208 418v39l62-0.4s22 15 40-6l-46-34z" fill="#363839" style="paint-order:fill markers stroke"/>
      </g>
      <g id="left-leg">
        <rect transform="rotate(46)" x="446" y="51" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
        <rect transform="rotate(-90)" x="-477" y="177" width="35" height="150" rx="20" ry="20" fill="#525457" style="paint-order:fill markers stroke"/>
        <path d="m253 440v39l62-0.4s22 15 40-6l-46-34z" fill="#363839" style="paint-order:fill markers stroke"/>
      </g>
      <rect id="arm-right" transform="rotate(49)" x="320" y="-105" width="30" height="135" rx="20" ry="20" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
      <rect id="forearm-right" transform="rotate(-84)" x="-248" y="153" width="30" height="111" rx="20" ry="18" fill="#e1b78a" style="paint-order:fill markers stroke"/>
      <g id="body" transform="translate(-221,34)">
        <rect transform="rotate(29)" x="523" y="-148" width="109" height="220" rx="50" ry="50" fill="#525457" style="paint-order:fill markers stroke"/>
        <path d="m547 144c-18-0.3-35 9-44 26l-37 67c-10 23-2 51 21 64l9 5c24 14 55 5 68-19l37-67c10-23 2-51-21-64l-9-5c-8-4-16-6-24-6z" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
        <path d="m533 145s-3 16 15 24c19 9 40 5 48-4s-64-21-64-21z" fill="#9ba0a3" style="paint-order:fill markers stroke"/>
      </g>
      <g id="guitar" transform="translate(-285,47)">
        <g transform="translate(297,-23)" fill="#fff">
          <circle cx="86" cy="157" r="4" style="paint-order:fill markers stroke"/>
          <circle cx="96" cy="163" r="4" style="paint-order:fill markers stroke"/>
          <circle cx="105" cy="169" r="4" style="paint-order:fill markers stroke"/>
          <circle cx="85" cy="202" r="4" style="paint-order:fill markers stroke"/>
          <circle cx="76" cy="196" r="4" style="paint-order:fill markers stroke"/>
          <circle cx="66" cy="190" r="4" style="paint-order:fill markers stroke"/>
        </g>
        <path d="m521 200a23 23 3 0 0-24 21 23 23 3 0 0 0.5 6c0.04 5-0.6 17-9 25a17 16 3 0 0-9 14 17 16 3 0 0 16 17 17 16 3 0 0 2-9e-3c3e-3 2e-3 0.06 0.05 0.06 0.05s0.3-0.05 0.4-0.09a17 16 3 0 0 2-0.3c5-0.5 15-0.5 19 10a56 54 3 0 0 51 37 56 54 3 0 0 58-52 56 54 3 0 0-53-57 56 54 3 0 0-17 2c-3 0.2-9-0.6-15-9a23 23 3 0 0-21-15 23 23 3 0 0-0.1-5e-3z" fill="#6b2f2f" style="paint-order:fill markers stroke"/>
        <path d="m520 193c-12-0.6-24 9-25 22-0.1 2 0.07 4 0.5 6 0.04 5-0.6 17-9 25-6 3-9 8-9 14-0.5 9 7 16 16 17 0.7 0.03 1 0.03 2-9e-3 3e-3 2e-3 0.06 0.05 0.06 0.05s0.3-0.05 0.4-0.09c0.7-0.06 1-0.2 2-0.3 5-0.5 15-0.5 19 10 7 21 28 36 51 37 31 1 57-22 58-52 2-30-22-55-53-57-6-0.2-11 0.5-17 2-3 0.2-9-0.6-15-9-7-14-18-14-21-14z" fill="#8f4140" style="paint-order:fill markers stroke"/>
        <rect transform="rotate(32)" x="590" y="-88" width="21" height="38" rx="4" ry="5" fill="#efeff0" style="paint-order:fill markers stroke"/>
        <path d="m375 135c-2 0.06-3 0.9-4 2l-11 17c-1 2-0.9 6 1 7l26 16c2 1 5 0.3 6-1l119 75c2 1 5 0.8 7-2l6-9c1-2 0.8-5-2-7l-119-75 0.02-0.03c1-2 0.7-5-2-7l-26-16c-0.9-0.5-2-0.8-3-0.7z" fill="#f0e0c9" style="paint-order:fill markers stroke"/>
        <rect transform="rotate(32)" x="563" y="-85" width="10" height="35" rx="5" ry="5" fill="#efeff0" style="paint-order:fill markers stroke"/>
        <rect transform="rotate(211)" x="-634" y="39" width="4" height="43" rx="2" ry="2" fill="#efeff0" style="paint-order:fill markers stroke"/>
      </g>
      <rect id="arm-left" x="360" y="208" width="30" height="135" rx="20" ry="20" fill="#f2f2f2" style="paint-order:fill markers stroke"/>
      <g id="forearm-left" transform="translate(-58,-60)" fill="#e1b78a">
        <rect transform="rotate(-84)" x="-356" y="375" width="30" height="111" rx="20" ry="18" style="paint-order:fill markers stroke"/>
        <circle cx="340" cy="373" r="20" style="paint-order:fill markers stroke"/>
      </g>
      <ellipse class="hair" cx="303" cy="177" rx="26" ry="25" fill="#3d3e40" style="paint-order:fill markers stroke"/>
      <ellipse cx="348" cy="155" rx="46" ry="47" fill="#e1b78a" style="paint-order:fill markers stroke"/>
      <g fill="#3d3e40">
        <circle cx="401" cy="142" r="19" style="paint-order:fill markers stroke"/>
        <circle class="hair" cx="310" cy="125" r="19" style="paint-order:fill markers stroke"/>
        <circle class="hair" cx="295" cy="152" r="19" style="paint-order:fill markers stroke"/>
        <ellipse class="hair" cx="393" cy="217" rx="33" ry="31" style="paint-order:fill markers stroke"/>
        <circle class="hair" cx="424" cy="219" r="19" style="paint-order:fill markers stroke"/>
        <ellipse class="hair" cx="426" cy="181" rx="26" ry="29" style="paint-order:fill markers stroke"/>
        <ellipse cx="387" cy="115" rx="30" ry="26" style="paint-order:fill markers stroke"/>
        <ellipse cx="389" cy="161" rx="21" ry="22" style="paint-order:fill markers stroke"/>
        <ellipse cx="337" cy="99" rx="24" ry="23" style="paint-order:fill markers stroke"/>
        <circle cx="416" cy="149" r="19" style="paint-order:fill markers stroke"/>
        <circle class="hair" cx="384" cy="184" r="23" style="paint-order:fill markers stroke"/>
        <ellipse cx="366" cy="87" rx="24" ry="23" style="paint-order:fill markers stroke"/>
      </g>
      <g transform="translate(120,-42)">
        <g transform="translate(-182,-23)" stroke="#9ba0a3" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3">
          <path d="m413 201s2-9 11-6c9 4 23 9 23 9s6 2 3 9-11 19-25 14c-14-4-16-14-12-27z" fill="#616469" style="paint-order:fill markers stroke"/>
          <path d="m365 185s2-9 11-6c9 4 23 9 23 9s6 2 3 9-11 19-25 14c-14-4-16-14-12-27z" fill="#616469" style="paint-order:fill markers stroke"/>
          <path d="m403 196s6-2 9 4" fill="none" style="paint-order:fill markers stroke"/>
          <path d="m401 189 17 5" fill="none" style="paint-order:fill markers stroke"/>
        </g>
        <path d="m214 197s-10 0.3-10-5c0.3-6 7-2 11-3" fill="#e1b78a" stroke="#b39676" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" style="paint-order:fill markers stroke"/>
        <g transform="translate(-4 -.4)">
          <circle cx="210" cy="211" r="4" fill="#b38276" style="paint-order:fill markers stroke"/>
          <rect transform="matrix(1 -.002 -.008 1 0 0)" x="186" y="209" width="28" height="5" ry="4" fill="#f0f1f2" style="paint-order:fill markers stroke"/>
          <path d="m203 208c1 0.3 2 1 2 3-0.02 2-0.7 2-2 3-0.03 8e-3 -0.06 0.01-0.09 0.01-0.08 0.01-0.1 0.03-0.2 0.03-0.02 6e-4 -0.03 5e-3 -0.05 5e-3h7c2 0 3-1 3-3s-1-3-4-3z" fill="#c6a47a" style="paint-order:fill markers stroke"/>
          <circle transform="matrix(1 -.06 .005 1 0 0)" cx="186" cy="222" r="2" fill="#a66d6d" stroke="#5d6065" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width=".9" style="paint-order:fill markers stroke"/>
        </g>
      </g>
      <path d="m323 85 23-42s13-16 44-3c32 12 40 33 38 39l-15 45s-32-41-90-39z" fill="#5d6065" style="paint-order:fill markers stroke"/>
      <g fill="#918d86" stroke="#a9a395" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3">
        <circle cx="336" cy="73" r="5" style="paint-order:fill markers stroke"/>
        <ellipse transform="rotate(6)" cx="359" cy="39" rx="7" ry="6" style="paint-order:fill markers stroke"/>
        <ellipse transform="matrix(.9 .4 -.5 .9 0 0)" cx="374" cy="-75" rx="9" ry="6" style="paint-order:fill markers stroke"/>
        <circle cx="411" cy="104" r="5" style="paint-order:fill markers stroke"/>
        <ellipse transform="rotate(29)" cx="390" cy="-111" rx="9" ry="6" style="paint-order:fill markers stroke"/>
      </g>
      <path d="m374 86c-33-13-64-12-69 0.8-2 6-0.9 11 8 20-0.6-2 5-11 17-9s19 4 33 8c10 3 18 7 34 18 8 7 8 18 5 22 15 0.6 20-6 23-12 5-13-18-34-51-47z" fill="#7b8285" stroke="#5d6065" stroke-dashoffset="232" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" style="paint-order:fill markers stroke"/>
      <circle id="hand-right" cx="132" cy="243" r="20" fill="#e1b78a" style="paint-order:fill markers stroke"/>
    </g>
  </svg>
</div>
<div class="thunder-container">
  <div class="thunder one"><div class="bg"></div></div>
  <div class="thunder one"><div class="bg"></div></div>
  <div class="thunder one"><div class="bg"></div></div>
  <div class="thunder one"><div class="bg"></div></div>
</div>  
<div class="thunder-container">
  <div class="thunder two"><div class="bg"></div></div>
  <div class="thunder two"><div class="bg"></div></div>
  <div class="thunder two"><div class="bg"></div></div>
  <div class="thunder two"><div class="bg"></div></div>
</div>
<svg width="0" height="0">
  <defs>
    <filter id="turbulence">
      <feTurbulence baseFrequency="0.009" numOctaves="3" result="TURBULENCE" />
      <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="150" />
    </filter>
    <filter id="wave">
      <feTurbulence baseFrequency="0.04" numOctaves="1" result="TURBULENCE" />
      <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" scale="10" />
    </filter>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
    </filter>
  </defs>
</svg>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章