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