gsap+svg实现按钮悬浮弯曲动画效果代码-html代码-BFW代码库

gsap+svg实现按钮悬浮弯曲动画效果代码

代码语言：html

所属分类：悬停

代码描述：gsap+svg实现按钮悬浮弯曲动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          padding: 0;
          margin: 0;
          overflow: hidden;
          font-family: "proxima-nova", sans-serif;
        }
        
        #end,
        #curvePath {
          visibility: hidden;
        }
        
        svg {
          width: 300px;
          height: 200px;
          font-size: 28px;
          font-weight: 600;
        }
        
        #start {
          fill: #42a6e0;
          stroke: #42a6e0;
          stroke-width: 4px;
        }
        
        .some-text-path {
          fill: none;
          stroke: none;
        }
        
        #target {
          fill: white;
        }
        
        #listener {
          opacity: 0;
          cursor: pointer;
          fill: transparent;
        }
    </style>


</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 300 200">

  <path id="end" d="M254,138.9c-69.4,16.1-138.7,16.1-208,0c-16.8-4.1-33.2-22.4-26.1-40.6l0,0C25,81.7,45.3,73.6,61.2,77.5
		c59.5,13.6,118.2,13.6,177.7,0c16.2-4.6,35.6,4.8,41.3,20.8l0,0C286.2,116.4,271.7,135.3,254,138.9z" />

  <path id="start" d="M238.3,131.6H61.7c-17.4,0-31.6-14.2-31.6-31.6v0c0-17.4,14.2-31.6,31.6-31.6h176.5c17.4,0,31.6,14.2,31.6,31.6v0
		C269.9,117.4,255.7,131.6,238.3,131.6z" />
  <path class=&qu.........完整代码请登录后点击上方下载按钮下载查看