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