HTML5 SVG实现超酷打击乐器特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5 SVG实现超酷打击乐器特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG实现超酷打击乐器特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
	<div class="htmleaf-content">
		<svg id="bucketdrums" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 664.1 289.4">
		  <title>bucketdrums</title>
		  <polygon points="664.2 289.6 -0.2 289.6 84.8 196.5 592.1 196.5 664.2 289.6" fill="#7c7c7c" opacity="0.15"/>
		  <g id="can-2">
			<polygon id="can-2-body" points="389.1 193.7 259.5 193.7 265.8 53.6 382.5 53.6 389.1 193.7" fill="#70c1b3" stroke="#000" stroke-miterlimit="10"/>
			<rect id="can-2-rim" x="265.8" y="53.6" width="116.8" height="3.82" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<rect id="can-2-handle" x="257.2" y="149" width="24.7" height="2.49" rx="1.2" ry="1.2" transform="translate(-37.7 121.2) rotate(-23.7)" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<rect id="can-2-handle-joint" x="279" y="140.7" width="6.6" height="8.58" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="bucket-2">
			<polygon id="bucket-2-body" points="405 211.5 340.6 211.5 342.2 133.9 403.5 133.9 405 211.5" fill="#247ba0" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-2-rim" x="339.4" y="197.6" width="66.7" height="20.49" fill="#247ba0" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-2-detail" x="340.6" y="211.1" width="65.5" height="2.41" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="can-3">
			<polygon id="can-3-body" points="556.1 231.7 445.8 231.7 454.7 111.6 549 111.6 556.1 231.7" fill="#70c1b3" stroke="#000" stroke-miterlimit="10"/>
			<rect id="can-3-rim" x="454.7" y="111.6" width="94.6" height="4.15" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="can-1">
			<polygon id="can-1-body" points="237.3 231.7 127 231.7 135.9 111.6 230.2 111.6 237.3 231.7" fill="#70c1b3" stroke="#000" stroke-miterlimit="10"/>
			<rect id="can-1-rim" x="135.9" y="111.6" width="94.6" height="4.04" fill="#ccc" stroke="#000" stroke-miterlimit="10"/>
			<g id="can-1-handle">
			  <path d="M197.5,216.9v4.8a5.3,5.3,0,0,1-5.3,5.2H174.1a4.8,4.8,0,0,1-4.6-4.9v-5.1h-3V224a4.9,4.9,0,0,0,4.7,4.9h23.9a5.4,5.4,0,0,0,5.4-5.2v-6.8h-3Z" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			  <rect x="164" y="213.7" width="8.6" height="5.14" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			  <rect x="194.2" y="213.7" width="8.6" height="5.14" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			</g>
		  </g>
		  <g id="bucket-3">
			<polygon id="bucket-3-body" points="455.8 239.5 391.4 239.5 393.1 161.9 454.2 161.9 455.8 239.5" fill="#247ba0" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-3-rim" x="390.2" y="225.6" width="66.7" height="20.49" fill="#247ba0" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-3-detail" x="391.4" y="235.9" width="65.5" height="1.8" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-3-handle" x="431.5" y="234.1" width="33.1" height="3.33" transform="matrix(0.87, 0.5, -0.5, 0.87, 177.92, -192.42)" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="bucket-1">
			<polygon id="bucket-1-body" points="269.6 236.4 205.2 236.4 206.7 158.8 267.8 158.8 269.6 236.4" fill="#247ba0" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-1-rim" x="204" y="222.6" width="66.7" height="20.49" fill="#247ba0" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-1-detail" x="204.5" y="233.8" width="65.6" height="1.94" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<rect id="bucket-1-handle" x="198.3" y="232.7" width="35.8" height="3.66" transform="translate(-76.1 106.8) rotate(-23.7)" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="pot-1">
			<path id="pot-1-body" d="M275.1,191.7h54.6a13.1,13.1,0,0,1,13.1,13.1v39.8a0,0,0,0,1,0,0H263a0,0,0,0,1,0,0V203.8A12.1,12.1,0,0,1,275.1,191.7Z" fill="#f25f5c" stroke="#000" stroke-miterlimit="10"/>
			<rect id="pot-1-rim" x="263" y="238.2" width="81.1" height="6.34" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<rect id="pot-1-handle-R" x="337.7" y="224.5" width="13" height="7.18" rx="3.6" ry="3.6" fill="#50514f" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="pot-2">
			<path id="pot-2-body" d="M503.6,205.6h73.3A13.1,13.1,0,0,1,590,218.7v52.2a0,0,0,0,1,0,0H491.5a0,0,0,0,1,0,0V217.7A12.1,12.1,0,0,1,503.6,205.6Z" fill="#f25f5c" stroke="#000" stroke-miterlimit="10"/>
			<rect id="pot-2-handle-R" x="580.5" y="249.9" width="18.9" height="7.18" rx="3.6" ry="3.6" fill="#50514f" stroke="#000" stroke-miterlimit="10"/>
			<rect id="pot-2-handle-L" x="482" y="248.4" width="18.9" height="7.18" rx="3.6" ry="3.6" fill="#50514f" stroke="#000" stroke-miterlimit="10"/>
			<rect id="pot-2-rim" x="489" y="268.4" width="103.3" height="4.5" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="lid-1">
			<ellipse id="lid-1-handle" cx="134.3" cy="240.7" rx="19.5" ry="6" fill="#50514f" stroke="#000" stroke-miterlimit="10"/>
			<path id="lid-1-body" d="M200.8,250.3H67.8c0-7.5,6.1-13.6,12.7-10H186.4c8.3-3.6,14.4,2.5,14.4,10h0Z" fill="#f25f5c" stroke="#000" stroke-miterlimit="10"/>
			<rect id="lid-1-rim" x="67.8" y="246.3" width="133" height="2.82" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="cup-2">
			<rect id="cup-2-body" x="370.9" y="216.1" width="34.9" height="47.53" fill="#ffe066" stroke="#000" stroke-miterlimit="10"/>
			<rect id="cup-2-rim" x="370.9" y="259.7" width="35.5" height="3.86" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<path id="cup-2-handle" d="M380.5,224.1c-4,0-8,6.2-8,13.8s4,13.8,8,13.8V224.1Z" fill="#50514f" stroke="#000" stroke-miterlimit="10"/>
		  </g>
		  <g id="cup-1">
			<rect id="cup-1-body" x="249.2" y="221.1" width="27.5" height="39.76" fill="#ffe066" stroke="#000" stroke-miterlimit="10"/>
			<rect id="cup-1-rim" x="249.2" y="258" width="27.5" height="2.82" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"/>
			<path id="cup-1-handle" d="M273.9,251.7c2.7,0,5.1-5,5.1-11.1s-2.5-11-5.2-11v22.1Z" fill="#50514f" stroke="#000" stroke-miterlimit="10"/>
		  </g>

		  <!-- Keyboard Interaction -->
		  <g id="keyboard" class="hidden" opacity="0.5">
			<g id="Key-89">
			  <rect x="67.8" y="252.7" width="12.6" height="12.56" fill="none" stroke="#50514f" stroke-miterlimit="10"/>
			  <text transform="translate(70.8 262.7) scale(1.1 1)" font-size="9.63" fill="#50514f" font-family="Adelle Sans" font-weight="700">Y</text>
			</g>
			<g id="Key-72">
			  <rect x="397.3" y="266.3" width="9.1" height="9.15" fill="none" stroke="#50514f" stroke-miterlimit="10"/>
			  <text transform="translate(399.3 273.6)" font-size="7.02" fill="#50514f" font-family="Adelle Sans" font-weight="700">H</text>
			</g>
			<g id="Key-71">
			  <rect x="248.8" y="263.6" width="10.6" height="10.59" fill="none" stroke="#50514f" stroke-miterlimit="10"/>
			  <text transform="translate(251.3 272)" font-size="8.12" fill="#50514f" font-family="Adelle Sans" font-weight="700">G</text>
			</g>
			<g id="Key-78">
			  <rect x="581.2" y="275.5" width="11.1" height="11.08" fill="none" stroke="#50514f" stroke-miterlimit="10"/>
			  <text transform="translate(582.6 284.7)" font-size="10.69" fill="#50514f" font-family="Adelle Sans" font-weight="700">N</text>
			</g>
			<g id="Key-66">
			  <rect x="325.8" y="247.3" width="17.3" height="17.31" fill="none" stroke="#50514f" stroke-miterlimit="10"/>
			  <text transform="translate(328.7 261.7)" font-size="16.7" fill="#50514f" font-family="Adelle Sans" font-weight="700">B</text>
			</g>
			<g id="Key-76">
			  <rect x="429" y="140.2" width="18.1" height="18.06" fill="none" stroke="#50514f" stroke-miterlimit="10" stroke-width="2"/>
			  <text transform="translate(433.2 155.3)" font-size="17.42" fill="#50514f" font-family="Adelle Sans" font-weight="700">L</text>
			</g>
			<g id="Key-75">
			  <rect x="389.5" y="116.7" width="14" height="14.05" fill="none" stroke="#50514f" stroke-miterlimit="10" stroke-width="2"/>
			  <text transform="translate(391.8 128.4)" font-size="13.55" fill="#50514f" font-family="Adelle Sans" font-weight="700">K</text>
			</g>
			<g id="Key-74">
			  <rect x="237.8" y="139.4" width="16.3" height="16.28" fill="none" stroke="#50514f" stroke-miterlimit="10" stroke-width="2"/>
			  <text transform="translate(241.7 153.5)" font-size="15.71" fill="#50514f" font-family="Adelle Sans" font-weight="700">J</text>
			</g>
			<g id="Key-70">
			  <rect x="513.8" y="72.9" width="34.6" height="34.59" fill="none" stroke="#50514f" stroke-miterlimit="10" stroke-width="3"/>
			  <text transform="translate(520.4 103.2)" font-size="36" fill="#50514f" font-family="Adelle Sans" font-weight="700">F</text>
			</g>
			<g id="Key-68">
			  <rect x="266.8" y="14.9" width="34.6" height="34.59" fill="none" stroke="#50514f" stroke-miterlimit="10" stroke-width="3"/>
			  <text transform="translate(271.4 45.2)" font-size="36" fill="#50514f" font-family="Adelle Sans" font-weight="700">D</text>
			</g>
			<g id="Key-83">
			  <rect x="136.9" y="77.3" width="30.1" height="30.1" fill="none" stroke="#50514f" stroke-miterlimit="10" stroke-width="3"/>
			  <text transform="translate(142.7 103.7)" font-size="31.33" fill="#50514f" font-family="Adelle Sans" font-weight="700">S</text>
			</g>
		  </g>
		</svg>

		<!-- Audio -->
		<audio id="can1-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can1.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="can2-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can2.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="can3-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/can3.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="bucket1-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket1.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="bucket2-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket2.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="bucket3-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/bucket3.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="pot1-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/pot1.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="pot2-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/pot2.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="cup1-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/cup2.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="cup2-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/cup1.mp3" preload="auto" type="audio/mp3" />
		</audio>
		<audio id="lid1-Audio">
			<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123180/lid1.mp3" preload="auto" type="audio/mp3" />
		</audio>
	</div>
</div>
<script src='js/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

// Click,tap screen or use your keyboard to play/**********Variables***********/
// can1 variblescan1 = document.getElementById('can-1');
	can1Audio = document.getElementById('can1-Audio');
	// can2 variblescan2 = document.getElementById('can-2');
	can2Audio = document.getElementById('can2-Audio');
	// can3 variblescan3 = document.getElementById('can-3');
	can3Audio = document.getElementById('can3-Audio');
	// bucket1 variblesbucket1 = document.getElementById('bucket-1');
	bucket1Audio = document.getElementById('bucket1-Audio');
	// bucket2 variblesbucket2 = document.getElementById('bucket-2');
	bucket2Audio = document.getElementById('bucket2-Audio');
	// bucket3 variblesbucket3 = document.getElementById('bucket-3');
	bucket3Audio = document.getElementById('bucket3-Audio');
	// pot1 variblespot1 = document.getElementById('pot-1');
	pot1Audio = document.getElementById('pot1-Audio');
	// pot2 variblespot2 = document.getElementById('pot-2');
	pot2Audio = document.getElementById('pot2-Audio');
	// cup1 variblescup1 = document.getElementById('cup-1');
	cup1Audio = document.getElementById('cup1-Audio');
	// cup2 variblescup2 = document.getElementById('cup-2');
	cup2Audio = document.getElementById('cup2-Audio');
	// lid1 varibleslid1 = document.getElementById('lid-1');
	lid1Audio = document.getElementById('lid1-Audio');
	// Autoplay buttonautoButton = document.getElementById('auto-button');
	/**********Can1**********/
// can-1 bouncevar can1tl = new TimelineMax({
	paused:true}
);
	can1tl.to(can1,0.1,{
	scaleX:1.06,transformOrigin:"50% 50%",ease:Expo.easeOut}
).to(can1,0.1,{
	scaleY:0.95,transformOrigin:"50% 50%",ease:Expo.easeOut}
,'0').to(can1,0.2,{
	scale:1,transformOrigin:"50% 50%",ease:Elastic.easeOut}
);
	// can1 audiofunction playCan1Audio(){
	can1Audio.currentTime = 0;
	can1Audio.play();
}
// can1 actionsfunction can1hit(){
	can1tl.restart();
	can1tl.play();
	playCan1Audio();
}
// can1 actions when clickedcan1.addEventListener("click",can1hit);
	/**********Can2**********/
// can2 bouncevar can2tl = new TimelineMax({
	paused:true}
);
	can2tl.to(can2,0.1,{
	scaleX:1.06,transformOrigin:"50% 50%",ease:Expo.easeOut}
).to(can2,0.1,{
	scaleY:0.95,transformOrigin:"50% 50%",ease:Expo.easeOut}
,'0').to(can2,0.2,{
	scale:1,transformOrigin:"50% 50%",ease:Elastic.easeOut}
);
	// can2 audiofunction playCan2Audio(){
	can2Audio.currentTime = 0;
	can2Audio.play();
}
// can2 actionsfunction can2hit(){
	can2tl.restart();
	can2tl.play();
	playCan2Audio();
}
// can2 actions when clickedcan2.addEventListener("click",can2hit);
	/**********Can3**********/
// can3 bouncevar can3tl = new TimelineMax({
	paused:true}
);
	can3tl.to(can3,0.1,{
	scaleX:1.06,transformOrigin:"50% 50%",ease:Expo.easeOut}
).to(can3,0.1,{
	scaleY:0.95,transformOrigin:"50% 50%",ease:Expo.easeOut}
,'0').to(can3,0.2,{
	scale:1,transformOrigin:"50% 50%",ease:Elastic.easeOut}
);
	// can3 audiofunction playCan3Audio(){
	can3Audio.currentTime = 0;
	can3Audio.play();
}
// can3 actionsfunction can3hit(){
	can3tl.restart();
	can3tl.play();
	playCan3Audio();
}
// can3 actions when clickedcan3.addEventListener("click",can3hit);
	/**********Bucket1**********/
// bucket1 wobblevar bucket1tl = new TimelineMax({
	paused:true}
);
	bucket1tl.to(bucket1,0.1,{
	rotation:6,transformOrigin:"50% 50%"}
).to(bucket1,0.4,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// bucket1 audiofunction playBucket1Audio(){
	bucket1Audio.currentTime = 0;
	bucket1Audio.play();
}
// bucket1 actionsfunction bucket1hit(){
	bucket1tl.restart();
	bucket1tl.play();
	playBucket1Audio();
}
// bucket1 actions when clickedbucket1.addEventListener("click",bucket1hit);
	/**********Bucket2**********/
// bucket2 wobblevar bucket2tl = new TimelineMax({
	paused:true}
);
	bucket2tl.to(bucket2,0.1,{
	rotation:6,transformOrigin:"50% 50%"}
).to(bucket2,1,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// bucket2 audiofunction playBucket2Audio(){
	bucket2Audio.currentTime = 0;
	bucket2Audio.play();
}
// bucket2 actionsfunction bucket2hit(){
	bucket2tl.restart();
	bucket2tl.play();
	playBucket2Audio();
}
// bucket2 actions when clickedbucket2.addEventListener("click",bucket2hit);
	/**********Bucket3**********/
// bucket3 wobblevar bucket3tl = new TimelineMax({
	paused:true}
);
	bucket3tl.to(bucket3,0.1,{
	rotation:6,transformOrigin:"50% 50%"}
).to(bucket3,0.4,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// bucket3 audiofunction playBucket3Audio(){
	bucket3Audio.currentTime = 0;
	bucket3Audio.play();
}
// bucket3 actionsfunction bucket3hit(){
	bucket3tl.restart();
	bucket3tl.play();
	playBucket3Audio();
}
// bucket3 actions when clickedbucket3.addEventListener("click",bucket3hit);
	/**********Pot1**********/
// pot1 bouncevar pot1tl = new TimelineMax({
	paused:true}
);
	pot1tl.to(pot1,0.1,{
	scaleX:1.06,transformOrigin:"50% 50%",ease:Expo.easeOut}
).to(pot1,0.1,{
	scaleY:0.9,transformOrigin:"50% 50%",ease:Expo.easeOut}
,'0').to(pot1,0.25,{
	scale:1,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// pot1 audiofunction playPot1Audio(){
	pot1Audio.currentTime = 0;
	pot1Audio.play();
}
// pot1 actionsfunction pot1hit(){
	pot1tl.restart();
	pot1tl.play();
	playPot1Audio();
}
// pot1 actions when clickedpot1.addEventListener("click",pot1hit);
	/**********Pot2**********/
// pot2 wobblevar pot2tl = new TimelineMax({
	paused:true}
);
	pot2tl.to(pot2,0.1,{
	rotation:6,transformOrigin:"50% 50%"}
).to(pot2,1,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// pot2 audiofunction playPot2Audio(){
	pot2Audio.currentTime = 0;
	pot2Audio.play();
}
// pot2 actionsfunction pot2hit(){
	pot2tl.restart();
	pot2tl.play();
	playPot2Audio();
}
// pot2 actions when clickedpot2.addEventListener("click",pot2hit);
	/**********Cup1**********/
// cup1 wobblevar cup1tl = new TimelineMax({
	paused:true}
);
	cup1tl.to(cup1,0.1,{
	rotation:6,transformOrigin:"50% 50%"}
).to(cup1,1,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// cup1 audiofunction playCup1Audio(){
	cup1Audio.currentTime = 0;
	cup1Audio.play();
}
// cup1 actionsfunction cup1hit(){
	cup1tl.restart();
	cup1tl.play();
	playCup1Audio();
}
// cup1 actions when clickedcup1.addEventListener("click",cup1hit);
	/**********Cup2**********/
// cup2 wobblevar cup2tl = new TimelineMax({
	paused:true}
);
	cup2tl.to(cup2,0.1,{
	rotation:6,transformOrigin:"50% 50%"}
).to(cup2,1,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// cup2 audiofunction playCup2Audio(){
	cup2Audio.currentTime = 0;
	cup2Audio.play();
}
// cup2 actionsfunction cup2hit(){
	cup2tl.restart();
	cup2tl.play();
	playCup2Audio();
}
// cup2 actions when clickedcup2.addEventListener("click",cup2hit);
	/**********Lid1**********/
// lid1 wobblevar lid1tl = new TimelineMax({
	paused:true}
);
	lid1tl.to(lid1,0.1,{
	rotation:3,transformOrigin:"50% 50%"}
).to(lid1,0.3,{
	rotation:0,transformOrigin:"50% 50%",ease:Elastic.easeOut.config(2.5,0.3)}
);
	// cup2 audiofunction playLid1Audio(){
	lid1Audio.currentTime = 0;
	lid1Audio.play();
}
// lid1 actionsfunction lid1hit(){
	lid1tl.restart();
	lid1tl.play();
	playLid1Audio();
}
// lid1 actions when clickedlid1.addEventListener("click",lid1hit);
	/**********Keyboard Triggers**********/
// keyboard guidekeyboardKeys = document.getElementById('keyboard');
	key66 = document.getElementById('Key-66');
	key72 = document.getElementById('Key-72');
	// keyboard symbol wobblefunction animateKey(key){
	keytl = new TimelineMax({
	paused:true}
);
	keytl.to(key,0.1,{
	scale:1.1,transformOrigin:"50% 50%",ease:Expo.easeOut}
).to(key,0.4,{
	scale:1,transformOrigin:"50% 50%",ease:Elastic.easeOut}
);
	keytl.restart();
	keytl.play();
}
// keyboard triggersdocument.onkeydown = function(e){
	keyboardKeys.classList.remove("hidden");
	thisKeyID = 'Key-' + e.keyCode;
	thisKey = document.getElementById(thisKeyID);
	animateKey(thisKey);
	switch (e.keyCode){
	case 83:can1hit();
	break;
	case 68:can2hit();
	break;
	case 70:can3hit();
	break;
	case 74:bucket1hit();
	break;
	case 75:bucket2hit();
	break;
	case 76:bucket3hit();
	break;
	case 66:pot1hit();
	break;
	case 78:pot2hit();
	break;
	case 71:cup1hit();
	break;
	case 72:cup2hit();
	break;
	case 89:lid1hit();
	break;
}
}
;

CSS代码(style.css):

body{background:#FFE066;}
svg{height:100vh;width:100vw;display:block;}
.hidden{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

41.12 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

41.12 KB

立即下载

黎雅

了解

打赏作者鼓励作者

html5特效