gsap+svg实现ai手臂滑竿拖动数值效果代码
代码语言：html
所属分类：拖放
代码描述：gsap+svg实现ai手臂滑竿拖动数值效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@font-face {font-family: "Alternate Gothic No2 D"; src: url("https://assets.codepen.io/35984/Alternate+Gothic+No2+D.woff2") format("woff2")}
body {
background-color: #dfdfdf;
overflow: hidden;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
:root {
--ui-grey: #d9d9d9;
--ui-green: #1DD1A1;
--ui-amber: #FECA57;
--ui-red: #FF6B6B;
--ui-shadow: #697683;
--ui-shadow-glow: #1DD1A1;
--ui-blue: #1789f2;
}
svg {
width: 800px;
height: 600px;
visibility: hidden;
}
text {
font-family: 'Alternate Gothic No2 D';
fill: var(--ui-grey);
font-size: 30px;
user-select: none;
}
</style>
</head>
<body >
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<path id="indexFingerEnd" d="m106.67,89.76c6.99-5.54,16.45-13.11,4.18-27.33l-.72-18.68c0-2.1,1.83-5.06,2.35-6.28l9.99-23.32c2.25-4.11,2.41-9.35-2.12-11.72-4.05-2.12-8.36-.41-10.04,2.84-.05.05-.09.09-.13.14,0,0-9.31,22.42-10.12,23.87-.59,1.07-2.92,4.51-4.11,6.82l-12.62,24.55c-2.1,4.07-1.51,9,1.48,12.47l13.88,16.1c2.03,2.35,5.58,2.6,7.93.57.01-.01.03-.03.04-.04Z" />
<g id="robotArm">
<path id="robotWristBall" d="m76.96,87.68c2.87,6.51,10.48,9.46,16.99,6.59,6.51-2.87,9.46-10.48,6.59-16.99h0c-2.87-6.51-10.48-9.46-16.99-6.59-6.51,2.87-9.46,10.48-6.59,16.99h0Z" fill="#adc4d9" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<g id="robotForearm">
<path d="m41.93,203.42c23.01-34.96,42.38-70.01,55.74-105.2.24-.57.04-1.24-.48-1.58-8.57-5.61-15.6-13.26-20.46-22.27-.74-1.36-2.45-1.87-3.81-1.13-.37.2-.69.48-.93.82C44.46,107.22,21,141.7,1.5,177.48l40.43,25.94Z" fill="#fff"/>
<path d="m41.93,203.42c17.45-29.32,40.36-63.68,55.74-105.2.24-.57.04-1.24-.48-1.58-8.57-5.61-15.6-13.26-20.46-22.27-.74-1.36-2.45-1.87-3.81-1.13-.37.2-.69.48-.93.82C44.53,107.11,21.07,141.6,1.5,177.48" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m11.34,161.46c2.81,4,6.57,10.89,14.27,13.64l26.85-46.8c-4.96-3.32-9.37-7.07-12.25-12.61" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path d="m90.12,116.79c-8.15-5.07-14.8-11.88-20.34-18.74l6.09-8.1c4.25,5.25,9.81,11.7,18.37,16.48" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</g>
<g id="robotHand">
<path id="littleFinger" d="m141.77,86.9c-2.69,2.47-6.88,2.29-9.36-.4-.18-.2-.35-.41-.51-.63l-8.18-11.48-18.17-7.02c-3.39-1.35-5.05-5.19-3.7-8.58,1.33-3.35,5.09-5.01,8.46-3.74l20.02,7.74c1.21.47,2.25,1.28,3,2.33l9.32,13.1c1.93,2.71,1.54,6.42-.89,8.68Z" fill="#fff" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="middleFinger" d="m151.92,67.04c-2.04,3.02-6.14,3.82-9.17,1.79l-13.87-9.35-20.93,2.88c-3.61.5-6.94-2.03-7.44-5.64-.5-3.61,2.03-6.94,5.64-7.44l23.42-3.22c1.61-.22,3.24.16,4.59,1.06l15.96,10.76c3.02,2.04,3.83,6.14,1.79,9.16,0,0,0,0,0,0Z" fill="#fff" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="indexFinger" d="m106.67,89.76c6.99-5.54,16.45-13.11,4.18-27.33l-.72-18.68c-.09-2.32.76-4.59,2.35-6.28l17.62-18.63c2.7-2.78,2.64-7.22-.14-9.92-2.78-2.7-7.22-2.64-9.92.14-.05.05-.09.09-.13.14l-19.46,20.59c-1.79,1.89-3.3,4.02-4.49,6.33l-12.62,24.55c-2.1,4.07-1.51,9,1.48,12.47l13.88,16.1c2.03,2.35,5.58,2.6,7.93.57.01-.01.03-.03.04-.04Z" fill="#fff" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<g id="robotThumb">
<path d="m106.67,89.76l32.87-29.31c3.4-3.18,3.58-8.5.4-11.9-3.18-3.4-8.5-3.58-11.9-.4l-17.19,14.29s-14.6,19.78-4.18,27.33Z" fill="#fff" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m106.67,89.76c-10.43-7.55,4.18-27.33,4.18-27.33,0,0,7.84,5.54,5.95,18.29l-10.13,9.03Z" fill="#adc4d9" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m120.13,54.71l12.03,12.31" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
<g id="indexJoint">
<path d="m122.04,27.36l-11.51-3.95,3.8,12.11,7.71-8.16Z" fill="#adc4d9" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m110.53,23.41l-2.33-1.84" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
<path d="m110.13,43.74s-8.97,7.86-19.39,2.49" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m93.38,58.02c2.68,2.74,3.17,6.94,1.2,10.23l-5.74,9.56-4.04-4.68c-2.99-3.47-3.57-8.4-1.48-12.47l4.35-8.46,5.7,5.83Z" fill="#adc4d9" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</g>
<filter id="shadow" x="-100%" y="-100%" width="250%" height="250%">
<feGaussianBlur stdDeviation="5" result="coloredBlur" />
<feOffset dx="0" dy="30" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#011536" flood-opacity="0.231"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode />
</feMerge>
</filter>
<linearGradient id="trackGrad" x1="206.65" y1="300" x2="593.35" y2="300" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="var(--ui-green)" />
<stop offset=".5" stop-color="var(--ui-amber)" />
<stop offset="1" stop-color="var(--ui-red)" />
</linearGradient>
<clipPath id="robotMask">
<rect class="robotMask" x="161.66" y="142.55" width="476.67" height="303.25" rx="38.86" ry="38.86" fill="red" stroke="none" stroke-miterlimit="10" stroke-width="0" />
</clipPath>
</defs>
<rect id="outline" x="161.66" y="142.55" width="476.67" height="303.25" rx="38.86" ry="38.86" fill="#FFF" stroke="#ddd" stroke-miterlimit="10" stroke-width="2" />
<g>
<rect id="track" x="206.65" y="293.5" width="380" height="13" rx="6.5" fill="#f0f0f0" />
<rect id="trackFill" x="208.65" y="295.5" width="378" height="9" rx="4.5" fill="url(#trackGrad)" opacity=1 />
<circle id="dragger" cx="0" cy="0" r="18" fill="#3f86fa" opacity=1 /.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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