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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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