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