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-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m234.2,291.94l-.08,15.73" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m217.97,291.86l-.08,15.73" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m187.83,278.66l-9.31,12.9" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m124.93,308.71l-.14,27.73-12.36-.06.14-27.73,12.36.06Z" fill="#6a7784" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m12.3,299.62c20.63-7.68,52.04-4.07,66.03-1.65l27.08,2.04c4.08.38,7.19,3.83,7.16,7.93l-.14,29.11c0,4.11-3.16,7.53-7.25,7.87,0,0-19.39,4.77-25.06,4.91-5.67.14-37.78,2.37-67.83-3.02v-47.19Z" fill="#fff"/>
<path d="m110.82,340.63l-.06-10.17c-.46,3.01-3.38,5.42-7.11,5.71l-27.08,1.7c-13.99,2-45.4,5.01-66.03-1.37v11.03c21.48,3.19,53.06,4.37,67.05,2.36l23.74-4.06c4.08-.32,8.09-1.22,9.49-5.21Z" fill="#f8f8f8"/>
<path d="m169.45,354.84c17.8-9.9,24.21-32.35,14.31-50.15-2.97-5.34-7.22-9.86-12.37-13.15l-27.18-.14v-.02s-.12.12-.12.12c-2.95,3.75-6.81,6.68-11.22,8.49-4.75,1.66-7.94,6.13-7.97,11.17l-.12,24.7c-.03,6.02,4.82,10.92,10.84,10.95,0,0,0,0,0,0,11.33.06,14.99,7.53,33.82,8.07v-.04Z" fill="#fff" stroke="#585b56" stroke-miterlimit="10" stroke-width="1.99"/>
<path d="m169.33,354.96v.03c-9.42-.28-15.04-2.28-19.73-4.22-4.68-1.94-8.44-3.82-14.1-3.85-6.02-.03-10.87-4.94-10.84-10.96l.04-8.66c.48,5.54,5.11,9.91,10.8,9.94,5.66.03,9.42,1.92,14.1,3.86s10.31,3.95,19.72,4.22v-.03c10.61-5.9,17.18-16.25,18.66-27.42,1.93,14.57-5.02,29.51-18.65,37.09Z" fill="#f8f8f8"/>
<path d="m171.4,291.52l-15.26-.08h0s15.26.08,15.26.08h0Z" fill="#f8f8f8" stroke="#585b56" stroke-miterlimit="10" stroke-width="1.99"/>
<path d="m144.22,291.39h0s.01-.01.01-.01h-.02Z" fill="#f8f8f8" stroke="#585b56" stroke-miterlimit="10" stroke-width="1.99"/>
<path d="m169.45,354.84c17.8-9.9,24.21-32.35,14.31-50.15-2.97-5.34-7.22-9.86-12.37-13.15l-27.18-.14v-.02s-.12.12-.12.12c-2.95,3.75-6.81,6.68-11.22,8.49-4.75,1.66-7.94,6.13-7.97,11.17l-.12,24.7c-.03,6.02,4.82,10.92,10.84,10.95,0,0,0,0,0,0,11.33.06,14.99,7.53,33.82,8.07" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m12.3,299.62c20.63-7.68,52.04-4.07,66.03-1.65l27.08,2.04c4.08.38,7.19,3.83,7.16,7.93l-.14,29.11c0,4.11-3.16,7.53-7.25,7.87,0,0-19.39,4.77-25.06,4.91-5.67.14-37.78,2.37-67.83-3.02v-47.19Z" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
<g class="robotHand" id="robotHand2">
<g id="robotThumb">
<path d="m140.4,300.32l21.95-49.78c1.98-4.22,7-6,11.21-3.98,4.21,2.02,6.02,7.08,4.04,11.3l-17.86,44.29s-8.96,5.88-19.35-1.83Z" fill="#adc4d9" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.56"/>
<path d="m140.4,300.32c7.88,4.69,17.71,6.01,19.35,1.83,2.23-5.69,7.32-18.71,7.32-18.71-.34-.48-8.08-10.16-17-4.97l-9.66,21.85Z" fill="#adc4d9" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.56"/>
<path d="m173.78,267.42c-4.02-6.5-9.2-8.94-15.42-7.81" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.56"/>
</g>
<polyline points="196.35 291.65 178.52 291.56 144.23 291.39 144.22 291.39" fill="none" stroke="#585b56" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path d="m171.4,291.52l-15.26-.08h0s15.26.08,15.26.08h0Z" fill="#f8f8f8" stroke="#585b56" stroke-miterlimit="10" stroke-width="1.99"/>
<path d="m144.22,291.39h0s.01-.01.01-.01h-.02Z" fill="#f8f8f8" stroke="#585b56" stroke-miterlimit="10" stroke-width="1.99"/>
<g id="robotThumbArm">
<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-.12c16.66.11,38.94.27,52.13.26l8.99.25c4.38.02,7.91,3.59,7.88,7.96-.02,4.38-3.59,7.91-7.96,7.88l2.9-.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="m169.45,354.84v.03c-.75-.02-1.46-.05-2.15-.09-.34-.02-.68-.05-1.02-.07-.33-.03-.66-.05-.98-.08-.39-.03-.77-.07-1.14-.12-.2-.02-.39-.05-.58-.07-.92-.12-1.79-.25-2.62-.39-.08-.01-.17-.03-.26-.05-.46-.08-.9-.17-1.33-.26-.08-.01-.17-.03-.25-.05-.03,0-.05-.01-.08-.01h0c-.06-.02-.12-.03-.18-.05-.05,0-.09-.01-.13-.03-.21-.05-.42-.09-.62-.14-.3-.07-.59-.14-.88-.22-.19-.05-.38-.1-.57-.15-.38-.1-.75-.21-1.11-.32-.49-.14-.97-.3-1.44-.46-.7-.23-1.38-.48-2.03-.72-.49-.19-.96-.38-1.43-.56-.31-.12-.61-.25-.92-.37-.15-.06-.3-.13-.45-.19l-1.27-.53c-.28-.12-.56-.24-.83-.35l-1.65-.68c-1.09-.43-2.19-.83-3.32-1.15-.29-.08-.57-.16-.86-.23-.58-.15-1.17-.28-1.78-.38-.31-.05-.62-.1-.93-.14-.32-.04-.64-.08-.97-.11-.27-.02-.54-.04-.82-.06-.39-.02-.79-.04-1.2-.04-6.02-.03-10.87-4.93-10.84-10.95l.12-24.7c0-.21.01-.42.02-.63.01-.17.02-.33.04-.49,0-.05.01-.09.01-.13.02-.13.03-.25.05-.37.04-.29.09-.58.16-.86.04-.2.09-.4.15-.6.04-.15.08-.29.13-.44.13-.44.3-.87.49-1.29.07-.16.15-.32.23-.48.02-.04.04-.08.06-.13.07-.12.13-.23.2-.35.06-.11.12-.22.2-.33.01-.03.03-.07.06-.1.09-.15.18-.3.28-.44h0s.01-.02.01-.03c.11-.15.22-.3.33-.45.09-.13.19-.26.3-.38.08-.09.15-.18.23-.26h0c.02-.05.05-.08.1-.12.01-.02.03-.05.06-.07.07-.09.16-.18.25-.27.21-.22.42-.42.65-.62.22-.2.44-.38.67-.55.03-.03.05-.04.07-.06.2-.14.39-.29.6-.42.25-.17.51-.32.77-.46.09-.05.17-.1.26-.14.05-.03.1-.06.15-.08.16-.08.32-.16.49-.24.08-.03.16-.07.24-.1.09-.04.19-.08.28-.11.14-.06.28-.11.42-.16.34-.14.68-.29,1.02-.45.03-.01.06-.02.08-.03.1-.05.2-.09.29-.14.08-.04.16-.07.23-.11.27-.13.54-.27.8-.41.26-.13.52-.28.78-.43.22-.12.44-.25.66-.39.06-.03.12-.06.17-.11.02,0,.03-.01.05-.03.21-.12.42-.26.63-.39h0s.05-.03.07-.05c.35-.23.69-.47,1.02-.72.36-.25.71-.53,1.06-.81.69-.55,1.3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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