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>
body {
 background-color: #FFF;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}

#toggle {
	cursor: pointer;
	fill: #2BDB7F;
}

#robotHand2 {
	opacity: 0
}
</style>

  
  
</head>

<body >
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
	<defs>
		<clipPath id="panelMask">
			<rect x="258.81" y="232.96" width="285.52" height="134.08" rx="67.04" ry="67.04" fill="#f5f5f5" />
		</clipPath>
	</defs>

	<g id="whole">
		<rect id="panel" x="258.81" y="232.96" width="285.52" height="134.08" rx="67.04" ry="67.04" fill="#f5f5f5" />
		<path id="toggle" d="m425.68,300c0,28.58,23.16,51.75,51.74,51.76,28.58,0,51.75-23.16,51.76-51.74v-.02c0-28.58-23.16-51.75-51.74-51.76-28.58,0-51.75,23.16-51.76,51.74v.02Z" fill="#ffe500" />
	</g>

		<g clip-path="url(#panelMask)">
			<g id="bothHands">
			<g class="robotHand" id="robotHand">
		    <path d="m207.94,347.16c-.01,4.37-3.56,7.9-7.93,7.88-.01,0-.02,0-.03,0l-28.72-.15c-20.4-.1-23.93-8.03-35.61-8.1-6.02-.03-10.87-4.93-10.84-10.95,0,0,0,0,0,0l.12-24.7c.03-5.03,3.22-9.51,7.97-11.17,4.41-1.82,8.28-4.74,11.22-8.49l.12-.12c6.13-6.66,12.98-14.18,33.19-14.1,13.63.07,18.99,4.57,18.94,14.36l50.99.25c4.38.02,7.91,3.59,7.88,7.96-.02,4.38-3.59,7.91-7.96,7.88l-39.1-.2c4.38.03,7.9,3.61,7.86,7.98s-3.61,7.9-7.98,7.86l-3.96-.02c4.38.02,7.91,3.59,7.88,7.96-.02,4.38-3.59,7.91-7.96,7.88l-3.96-.02c4.37.01,7.9,3.57,7.88,7.93,0,.01,0,.02,0,.04Z" fill="#adc4d9"/>
    <path d="m188.42,323.3l15.7.08" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path d="m185.16,307.44l23,.11" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path d="m184.53,339.13l15.54.08" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path d="m207.94,347.16c-.01,4.37-3.56,7.9-7.93,7.88-.01,0-.02,0-.03,0l-28.72-.15c-20.4-.1-23.93-8.03-35.61-8.1-6.02-.03-10.87-4.93-10.84-10.95,0,0,0,0,0,0l.12-24.7c.03-5.03,3.22-9.51,7.97-11.17,4.41-1.82,8.28-4.74,11.22-8.49l.12-.12c6.13-6.66,12.98-14.18,33.19-14.1,13.63.07,18.99,4.57,18.94,14.36l50.99.25c4.38.02,7.91,3.59,7.88,7.96-.02,4.38-3.59,7.91-7.96,7.88l-39.1-.2c4.38.03,7.9,3.61,7.86,7.98s-3.61,7.9-7.98,7.86l-3.96-.02c4.38.02,7.91,3.59,7.88,7.96-.02,4.38-3.59,7.91-7.96,7.88l-3.96-.02c4.37.01,7.9,3.57,7.88,7.93,0,.01,0,.02,0,.04Z" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
    <path d="m196.35,291.65l-17.83-.09-34.3-.17" fill="none" stroke="#585b56" stroke-.........完整代码请登录后点击上方下载按钮下载查看