示例

HTML

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
<defs><clipPath id="holeClip"><circle  cx="400" cy="371.122" r="22.69"/></clipPath><clipPath id="neckClip"><rect x="383.873" y="110.561" width="32.254" height="253.636"/></clipPath>
</defs>
<path id="notePath" fill="none" d="M438.102,368.318c0,0,3.357-68.318,45.062-82.958c3.995-1.402,11.503-4.043,11.503-4.043c26.977-13.359,44.659-32.345,40.3-62.132c-2.877-19.661-27.7-31.651-44.202-35.654c-0.898-0.218-1.802-0.426-2.678-0.72c-27.313-9.184-23.131-54.256-23.131-54.256"/>
<path id="notepath2" fill="none" d="M451.744,313.113c0.357,0,0.713,0.002,1.066,0.005c12.958,0.117,18.587-3.061,25.342,1.303c2.246,1.451,3.955,3.574,5.141,5.97c2.767,5.59,10.022,14.116,23.589,14.116c14.118,0,28.743-12.801,28.743-12.801s20.668-19.734,20.668-45.647c0-27.623-21.934-32.578-29.251-42.691c-7-9.674-6.302-22.796,1.761-31.603c10.034-10.959,29.372-21.235,29.372-50.272"/>
<line id="shadow" fill="none" stroke="#262626" stroke-width="3" stroke-miterlimit="10" x1="243.336" y1="571.535" x2="556.664" y2="571.535"/>
<g id="guitar"><circle id="circle" fill="none" stroke="#262626" stroke-width="1" stroke-miterlimit="10" cx="400" cy="311.122" r="54.265"/><path id="note" fill="#7683F3" d="M442.539,352.692c-0.792-0.541-1.595-1.458-2.107-2.098v-1.593c0-0.315-0.255-0.57-0.57-0.57c-0.315,0-0.57,0.255-0.57,0.57v14.054c-0.889-0.708-2.219-1.158-3.707-1.158c-2.676,0-4.846,1.456-4.846,3.253c0,1.796,2.17,3.253,4.846,3.253c2.676,0,4.846-1.456,4.846-3.253c0-0.129-0.012-0.256-0.034-0.382c0.021-0.059,0.034-0.122,0.034-0.188v-10.499c1.285,0.341,2.923,1.473,2.923,1.473c1.575,1.011,1.541,3.14,1.541,3.14C446.664,355.529,443.849,353.587,442.539,352.692z"/>
<path id="note2" fill="#7683F3" d="M456.344,320.211l-0.002-0.063c0-0.025-0.001-0.049-0.003-0.074l-0.434-12.456c-0.032-0.928-0.981-1.539-1.839-1.183l-10.387,4.104c-0.516,0.214-0.844,0.729-0.819,1.287l0.363,9.807c-0.834-0.358-1.872-0.435-2.917-0.147c-2.083,0.575-3.401,2.384-2.943,4.042c0.457,1.658,2.517,2.535,4.599,1.961c1.833-0.506,3.072-1.968,3.032-3.441h0.001l-0.425-9.944c-0.021-0.501,0.275-0.961,0.739-1.151l8.193-3.344c0.437-0.178,0.918,0.134,0.933,0.606l0.303,7.501c-0.815-0.413-1.846-0.53-2.881-0.245c-1.968,0.543-3.193,2.327-2.736,3.985c0.457,1.658,2.424,2.561,4.392,2.018c1.684-0.465,2.82-1.837,2.828-3.262L456.344,320.211z"/><rect id="neckBack" x="383.873" y="110.561" fill="#3656D8" width="32.254" height="253.636"/><path id="bodyBack" fill="#FFFFFF" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M482.801,438.348c0,0-2.212-25.285-15.366-41.722c-8.79-10.983-13.654-24.717-12.351-38.724c0.604-6.5,2.996-13.226,5.656-19.364c1.425-3.289,2.217-6.817,2.422-10.396c0-30.705-16.613-55.597-63.163-55.597s-63.163,24.892-63.163,55.597c0.206,3.579,0.997,7.107,2.422,10.396c2.66,6.139,5.052,12.864,5.656,19.364c1.303,14.007-3.561,27.741-12.351,38.724c-13.154,16.437-15.366,41.722-15.366,41.722c-0.345,4.88-0.467,9.777-0.264,14.665c1.505,36.181,14.398,64.25,83.065,64.25c68.667,0,81.56-28.069,83.065-64.25C483.269,448.125,483.147,443.228,482.801,438.348z"/><path id="bodyFront" fill="#FFFFFF" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M482.801,438.348c0,0-2.212-25.285-15.366-41.722c-8.79-10.983-13.654-24.717-12.351-38.724c0.604-6.5,2.996-13.226,5.656-19.364c1.425-3.289,2.217-6.817,2.422-10.396c0-30.705-16.613-55.597-63.163-55.597s-63.163,24.892-63.163,55.597c0.206,3.579,0.997,7.107,2.422,10.396c2.66,6.139,5.052,12.864,5.656,19.364c1.303,14.007-3.561,27.741-12.351,38.724c-13.154,16.437-15.366,41.722-15.366,41.722c-0.345,4.88-0.467,9.777-0.264,14.665c1.505,36.181,14.398,64.25,83.065,64.25c68.667,0,81.56-28.069,83.065-64.25C483.269,448.125,483.147,443.228,482.801,438.348z"/><rect id="neck" x="383.873" y="110.561" fill="#7683F3" width="32.254" height="253.636"/><g id="neckClipGroup" clip-path="url(#neckClip)"><g id="highLightGroup"><polygon id="neckHighlight2" opacity="0.2" fill="#EBEBEB" points="416.127,300.785 383.873,288.391 383.873,267.989 416.127,282.227 416.127,300.785"/><polygon id="neckHighlightMorph2" opacity="0.2" fill="none" points="416.127,288.391 383.873,300.785 383.873,282.227 416.127,267.989 416.127,300.785"/><polygon id="neckHighlight1" opacity="0.3" fill="#EBEBEB" points="416.127,210.785 383.873,198.391 383.873,177.989 416.127,192.227 416.127,210.785"/><polygon id="neckHighlightMoprh1" opacity="0.3" fill="none" points="416.127,198.391 383.873,210.785 383.873,192.227 416.127,177.989 416.127,210.785"/> </g></g><circle id="soundhole" fill="#FFFFFF" stroke="#262626" stroke-width="3" stroke-miterlimit="10" cx="400" cy="371.122" r="24.182"/><g id="holeClipGroup" clip-path="url(#holeClip)">      <circle fill="#CFCFCF" cx="400" cy="371.122" r="24.182"/><circle id="holeLight" fill="#EBEBEB" cx="390.185" cy="381.466" r="16.817"/></g><path id="bridge" fill="none" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M429.283,458.802h-58.567c-1.357,0-2.458-1.1-2.458-2.458v-5.543c0-1.358,1.1-2.458,2.458-2.458h58.567c1.357,0,2.458,1.1,2.458,2.458v5.543C431.741,457.702,430.641,458.802,429.283,458.802z"/><path id="bridge" fill="none" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M429.283,458.802h-58.567c-1.357,0-2.458-1.1-2.458-2.458v-5.543c0-1.358,1.1-2.458,2.458-2.458h58.567c1.357,0,2.458,1.1,2.458,2.458v5.543C431.741,457.702,430.641,458.802,429.283,458.802z"/><path id="headStockBack" fill="#262626" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M409.322,113.411h-18.645c-4.839,0-8.762-3.923-8.762-8.762V60.105c0-4.839,3.923-8.762,8.762-8.762h18.645c4.839,0,8.762,3.923,8.762,8.762v44.544C418.085,109.488,414.162,113.411,409.322,113.411z"/><path id="headStock" fill="#FFFFFF" stroke="#262626" stroke-width="3" stroke-miterlimit="10" d="M409.322,113.411h-18.645c-4.839,0-8.762-3.923-8.762-8.762V60.105c0-4.839,3.923-8.762,8.762-8.762h18.645c4.839,0,8.762,3.923,8.762,8.762v44.544C418.085,109.488,414.162,113.411,409.322,113.411z"/><g id="strings"><line fill="none" stroke="#3656D8" stroke-width="2" stroke-miterlimit="10" x1="386.217" y1="103.66" x2="386.217" y2="458.802"/><line fill="none" stroke="#3656D8" stroke-width="2" stroke-miterlimit="10" x1="391.217" y1="86.66" x2="391.217" y2="458.802"/><line fill="none" stroke="#3656D8" stroke-width="2" stroke-miterlimit="10" x1="396.93" y1="73.513" x2="396.93" y2="458.802"/><line fill="none" stroke="#3656D8" stroke-width="2" stroke-miterlimit="10" x1="403.07" y1="73.513" x2="403.07" y2="458.802"/><line fill="none" stroke="#3656D8" stroke-width="2" stroke-miterlimit="10" x1="408.783" y1="86.66" x2="408.783" y2="458.802"/><line fill="none" stroke="#3656D8" stroke-width="2" stroke-miterlimit="10" x1="413.783" y1="103.66" x2="413.783" y2="458.802"/></g>
</g></svg><a href="https://greensock.com/"><img class="gsap-3-logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-3-logo.svg" width="150"/></a>

CSS

html,body {height:100%;
}
body {display:flex;align-items:center;justify-content:center;
}
svg {width:100%;max-width:800px;height:100vh;visibility:hidden;
}
.gsap-3-logo { width: 20vw; max-width: 150px; position: fixed; bottom: 15px; right: 15px;
}

JS

gsap.set("#neckHighlight1", { scale: 1.5, y: -30 });
gsap.set("#neckHighlight2", { scale: 1.5, y: -30 });
gsap.set('svg',{visibility:'visible'});
const left = gsap.timeline({paused: true,yoyo: true,repeat: 1,defaults: { duration: 0.96, ease: "expo" }
});
left.to("#bodyBack", { x: -6 }, "body").to("#bodyFront", { x: 6, y: 1 }, "body").to("#neckBack", { x: -2 }, "body").to("#neck", { x: 4 }, "body").to("#neckClipGroup", { x: 4 }, "body").to("#highLightGroup", { y: 20, ease: "power4.out" }, "body").to("#headStock", { x: 4 }, "body").to("#headStockBack", { x: -2 }, "body").to("#bridge",{ x: 4, y: 1, scaleX: 0.98, transformOrigin: "right center" },"body").to("#soundhole", { x: 4, y: 1 }, "body").to("#holeClipGroup", { x: 4, y: 1 }, "body").to("#strings", { x: 4 }, "body").to("#guitar", { rotation: -5, transformOrigin: "left bottom" }, "body").to("#shadow",{scaleX: 0.88,transformOrigin: "50% 50%",duration: 0.32,ease: "power1"},"body+=0.04");const right = gsap.timeline({paused: true,yoyo: true,repeat: 1,defaults: { duration: 0.96, ease: "expo" }
});
right.to("#bodyBack", { x: 6 }, "body").to("#bodyFront", { x: -6, y: -1 }, "body").to("#neckBack", { x: 2 }, "body").to("#neck", { x: -4 }, "body").to("#neckHighlight1",{ y: -40, ease: "power4.out", morphSVG: "#neckHighlightMoprh1" },"body").to("#neckHighlight2",{ y: -40, ease: "power4.out", morphSVG: "#neckHighlightMorph2" },"body").to("#highLightGroup", { y: 20, ease: "power4.out" }, "body").to("#neckClipGroup", { x: -4 }, "body").to("#headStock", { x: -4 }, "body").to("#headStockBack", { x: 2 }, "body").to("#bridge",{ x: -4, y: -1, scaleX: 0.98, transformOrigin: "left center" },"body").to("#soundhole", { x: -4, y: -1 }, "body").to("#holeClipGroup", { x: -4, y: -1 }, "body").to("#strings", { x: -4 }, "body").to("#guitar",{ rotation: 5, y: -10, transformOrigin: "left bottom" },"body").to("#holeLight", { x: 20 }, "body").to("#shadow",{scaleX: 0.88,transformOrigin: "50% 50%",duration: 0.32,ease: "power1"},"body+=0.04");const stringTl = gsap.timeline({paused: true,yoyo: true,defaults: { duration: 0.32, ease: "elastic.out(0.75, 0.3)" }
});
stringTl.to("#strings line", { x: -2, stagger: 0.04, strokeWidth: 3 }, "in").to("#strings line", { x: 2, stagger: 0.04, strokeWidth: 2 }, "in+=0.04").to("#strings line", { x: 0, stagger: 0.04, strokeWidth: 2 }, "in+=0.08");gsap.set("#circle", { x: 10, opacity: 0 });const noteTl = gsap.timeline({ paused: true });
noteTl.to("#circle", { opacity: 1, duration: 0.01 }, "notes").to("#circle",{scale: 2.25,transformOrigin: "center center",duration: 0.64,ease: "circ"},"notes").to("#note",{scale: 1.35,transformOrigin: "center center",motionPath: { path: "#notePath", align: "self" },duration: 1.9},"notes").to("#note",{ opacity: 0, transformOrigin: "center center", duration: 0.7 },"notes+=1").to("#note2",{scale: 1.25,transformOrigin: "center center",motionPath: { path: "#notepath2", align: "self" },duration: 1.9},"notes").to("#note2",{ opacity: 0, transformOrigin: "center center", duration: 0.7 },"notes+=1").to("#circle", { opacity: 0, duration: 0.16 }, "notes+=0.24");gsap.set("#note", { transformOrigin: "center center" });const noteRotation = gsap.timeline({paused: true,defaults: { duration: 0.32 }
});
noteRotation.to("#note",{keyframes: [{ rotation: 3 },{ rotation: -3 },{ rotation: 5 }]},0).to("#note2",{keyframes: [{ rotation: 3 },{ rotation: -3 },{ rotation: 5 }]},0);const masterTl = gsap.timeline({ repeat: -1 });
masterTl.add(left.play(), 0).add(right.play(), 1.92).add(stringTl.play(), 1.96).add(noteTl.play(), 1.9).add(noteRotation.play(), 1.9);

吉他（guitar）相关推荐

一个逐步“优化”的范例程序(转）
reference URL: http://www.tracefact.net/Software-Design/A-Sample-Design.aspx 本文是<Object-Oriented ...
Lego Boost打算把所有乐高玩具变成可编程机器人
虽然CES展会上到处都是机器人,但是乐高机器人可不是每年都有的. 过去一年中,具有教育意义的可编码机器人玩具在儿童科技领域一直是一个大趋势,从Jimu机器人到Cozmo机器人,无不体现这一趋势.乐高公 ...
基于深度学习的点云分割网络及点云分割数据集
作者丨泡椒味的泡泡糖来源丨深蓝AI 引言点云分割是根据空间.几何和纹理等特征对点云进行划分,使得同一划分内的点云拥有相似的特征.点云的有效分割是许多应用的前提,例如在三维重建领域,需要对场景内的物 ...
前沿丨基于深度学习的点云分割网络及点云分割数据集
众所周知,点云的有效分割是许多应用的前提,例如在三维重建领域,需要对场景内的物体首先进行分类处理,然后才能进行后期的识别和重建.传统的点云分割主要依赖聚类算法和基于随机采样一致性的分割算法,在很多技术 ...
英语单词记忆以及句式记忆
一.前言主讲词汇以及词汇的使用. 词汇方法以3000单词打底.外加500专用词汇.分词频进行排列,以及词以类记进行归纳.归纳方面有介词.数字.颜色.外表.服装.食物.建筑与社会关系.艺术与体育.娱乐 ...
计算机音乐制作手册,计算机音乐制作手册
第1章计算机音乐制作概述 1.1 计算机音乐发展概况 1.2 计算机音乐制作工艺流程 1.2.1 歌曲创作(Songwriting) 1.2.2 编曲(Arrangements) 1.2.3 录音( ...
uniapp 仿网易云音乐播放器微信小程序
效果视频: uniapp 仿照网易云播放器功能效果截图: 上代码: <template><view class=""><scroll-view :s ...
大盘点 | 基于深度学习的点云分割网络及点云分割数据集
编辑 | 深蓝前沿点击下方卡片,关注"自动驾驶之心"公众号 ADAS巨卷干货,即可获取后台回复[数据集下载]获取计算机视觉近30种数据集! 引言点云分割是根据空间.几何和纹理 ...
酷我音乐爬虫(400多行代码)
酷我音乐 http://www.kuwo.cn/ 1. 分析音乐下载的接口 http://www.kuwo.cn/url?format=mp3&rid=81010978&respons ...
Guitar Pro8最新2023中文免费吉他乐谱作曲练习工具
Guitar Pro 8是吉他手和音乐家最通用的学习,作曲和练习工具.Guitar Pro 8 包含学习您最喜爱的艺术家的音乐.创作自己的歌曲和提高演奏技巧所需的一切.该程序提供无与伦比的记谱和乐谱功 ...

吉他（guitar）

吉他（guitar）

示例

HTML

CSS

JS

吉他（guitar）相关推荐

最新文章

热门文章