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;
 
}

#robotHandHorns {
	opacity: 0;
}

#offRing {
	cursor: pointer;
}
</style>

  
  
</head>

<body >
  <svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
	<clipPath id="handMask">
		<rect class="handMask" x="214.68" y="130" width="370.64" height="303.25" rx="51" ry="51" fill="red" stroke="none" stroke-miterlimit="10" stroke-width="2"/>
		</clipPath>
	</defs>
  <g id="whole">
    <circle id="offRing" cx="340" cy="300" r="30" fill="#fff" stroke="#ddd" stroke-miterlimit="10" stroke-width="3"/>
    <g id="AIText">
      <path d="m377.14,228.29c-.72,0-1.48-.15-2.3-.46-.82-.31-1.48-.7-1.99-1.19-.51-.48-.77-1.06-.77-1.72,0-.15.02-.38.08-.69l15.24-49.63c.31-.92.96-1.61,1.95-2.07,1-.46,2.05-.69,3.18-.69s2.26.23,3.25.69c1,.46,1.65,1.15,1.95,2.07l15.17,49.63c.1.31.15.54.15.69,0,.61-.27,1.18-.8,1.69-.54.51-1.2.92-1.99,1.22-.79.31-1.57.46-2.34.46-.66,0-1.24-.13-1.72-.38-.49-.25-.83-.69-1.03-1.3l-3.14-10.88h-18.99l-3.06,10.88c-.15.61-.5,1.05-1.03,1.3-.54.26-1.14.38-1.8.38Zm7.74-19.07h15.32l-7.66-26.27-7.66,26.27Z" fill="#1789f2"/>
      <path d="m423.17,228.29c-1.02,0-1.95-.23-2.8-.69-.84-.46-1.26-1.12-1.26-1.99v-50.7c0-.92.42-1.58,1.26-1.99.84-.41,1.77-.61,2.8-.61s1.95.21,2.79.61c.84.41,1.26,1.07,1.26,1.99v50.7c0,.87-.42,1.53-1.26,1.99-.84.46-1.77.69-2.79.69Z" fill="#1789f2"/>
    </g>
    <g id="offText" fill="#ddd">
      <g>
        <path d="m327.53,372.7c-1.19,0-2.26-.21-3.21-.62-.94-.41-1.69-1.07-2.24-1.99-.55-.92-.83-2.13-.83-3.64v-8.15c0-1.51.27-2.73.83-3.64.55-.91,1.3-1.58,2.24-1.99.94-.41,2.01-.62,3.21-.62s2.24.21,3.19.62c.95.41,1.71,1.07,2.27,1.99.56.92.84,2.13.84,3.64v8.15c0,1.51-.28,2.73-.84,3.64-.56.91-1.32,1.58-2.27,1.99-.95.41-2.02.62-3.19.62Zm0-2.63c1.03,0,1.84-.29,2.44-.88.6-.59.9-1.5.9-2.73v-8.15c0-1.23-.29-2.14-.88-2.73s-1.41-.88-2.45-.88-1.86.29-2.45.88-.88,1.5-.88,2.73v8.15c0,1.23.29,2.14.88,2.73s1.4.88,2.45.88Z" />
        <path d="m338.78,372.53c-.37,0-.71-.08-1.02-.24-.31-.16-.46-.41-.46-.74v-18.51c0-.32.14-.56.42-.73.28-.17.58-.25.9-.25h9.83c.34,0,.58.14.73.42s.22.57.22.87c0,.35-.08.67-.24.94-.16.27-.4.41-.71.41h-8.18v6.41h4.34c.32,0,.55.12.71.36.16.24.24.52.24.84,0,.26-.08.52-.22.77s-.39.38-.73.38h-4.34v8.09c0,.34-.15.58-.46.74-.31.16-.65.24-1.02.24Z" />
        <path d="m352.9,372.53c-.37,0-.71-.08-1.02-.24-.31-.16-.46-.41-.46-.74v-18.51c0-.32.14-.56.42-.73.28-.17.58-.25.9-.25h9.83c.34,0,.58.14.73.42s.22.57.22.87c0,.35-.08.67-.24.94-.16.27-.4.41-.71.41h-8.18v6.41h4.34c.32,0,.55.12.71.36.16.24.24.52.24.84,0,.26-.08.52-.22.77s-.39.38-.73.38h-4.34v8.09c0,.34-.15.58-.46.74-.31.16-.65.24-1.02.24Z" />
     .........完整代码请登录后点击上方下载按钮下载查看