gsap+svg实现ai手臂滑竿拖动数值效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看