当前位置：首页 > 网页特效 > 动画效果

基于HTML5 SVG的超酷打击乐器特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
所有的乐器都是使用SVG来制作，所有的乐器都已g元素作为分组，代码如下：

```html
<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"></polygon>
  <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>
  <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>
  <rect id="can-2-handle-joint" x="279" y="140.7" width="6.6" height="8.58" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
</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"></polygon>
  <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>
  <rect id="bucket-2-detail" x="340.6" y="211.1" width="65.5" height="2.41" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
</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"></polygon>
  <rect id="can-3-rim" x="454.7" y="111.6" width="94.6" height="4.15" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
</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"></polygon>
  <rect id="can-1-rim" x="135.9" y="111.6" width="94.6" height="4.04" fill="#ccc" stroke="#000" stroke-miterlimit="10"></rect>
  <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"></path>
    <rect x="164" y="213.7" width="8.6" height="5.14" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
    <rect x="194.2" y="213.7" width="8.6" height="5.14" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
  </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"></polygon>
  <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>
  <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>
  <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"></rect>
</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"></polygon>
  <rect id="bucket-1-rim" x="204" y="222.6" width="66.7" height="20.49" fill="#247ba0" stroke="#000" stroke-miterlimit="10"></rect>
  <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>
  <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"></rect>
</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"></path>
  <rect id="pot-1-rim" x="263" y="238.2" width="81.1" height="6.34" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
  <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"></rect>
</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"></path>
  <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>
  <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>
  <rect id="pot-2-rim" x="489" y="268.4" width="103.3" height="4.5" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
</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"></ellipse>
  <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"></path>
  <rect id="lid-1-rim" x="67.8" y="246.3" width="133" height="2.82" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
</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>
  <rect id="cup-2-rim" x="370.9" y="259.7" width="35.5" height="3.86" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
  <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"></path>
</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>
  <rect id="cup-1-rim" x="249.2" y="258" width="27.5" height="2.82" fill="#d4d5d6" stroke="#000" stroke-miterlimit="10"></rect>
  <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"></path>
</g>
```
乐器的音效通过audio元素来实现。

```html
<audio id="can1-Audio">
    <source src="vedio/can1.mp3" preload="auto" type="audio/mp3" />
</audio>
<audio id="can2-Audio">
    <source src="vedio/can2.mp3" preload="auto" type="audio/mp3" />
</audio>
......
```
#####  JAVASCRIPT
特效中通过TweenMax.js来控制用户于乐器之间的交互。实现代码页非常简单，例如can1乐器的JS代码如下：

```html
// 鼠标点击can1时的缩放效果
var 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的音效
function playCan1Audio() {
  can1Audio.currentTime = 0;
  can1Audio.play();
}
 
// 用户点击时执行的动作
function can1hit(){
  can1tl.restart();
  can1tl.play();
  playCan1Audio();
}
 
// 附加鼠标点击事件
can1.addEventListener("click", can1hit);       
```

web299.com

基于HTML5 SVG的超酷打击乐器特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果