gsap实现一个按钮鼠标悬浮爆炸效果代码-html代码-BFW代码库

gsap实现一个按钮鼠标悬浮爆炸效果代码

代码语言：html

所属分类：悬停

代码描述：使用gsap+svg实现一个button按钮鼠标悬浮上去出现温和的爆炸效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
        body {
          font-family: "Nunito", sans-serif;
          min-height: 100vh;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        
        .link {
          display: inline-block;
          position: relative;
          background-color: #9896f1;
          border-radius: 99px;
          padding: 0.4rem 3.5rem;
          color: white;
          text-decoration: none;
          font-size: 1.15rem;
          box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }
        .link svg {
          position: absolute;
          width: 500%;
          height: 500%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
        }
    </style>


</head>

<body>
    <a class="link anim-explode-container" href="#">
        <p>hover me</p>
        <svg class="anim-explode" role="presentational" viewBox="0 0 500 500"></svg&g.........完整代码请登录后点击上方下载按钮下载查看