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>
    </a>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.5.2.js"></script>
    <script>
        let container = document.querySelector(".anim-explode-container");
        let svg = container.querySelector(".anim-explode");
        let numberOfShapes = 10;
        
        let shapes = [
        	"M254 286.11a50 50 0 0050-50H204a50 50 0 0050 50z",
        	"M255.5 271a20 20 0 10-20-20 20 20 0 0020 20zm0 30a50 50 0 10-50-50 50 50 0 0050 50z",
        	"M248.8 202.17a8 8 0 019.4 0l40.6 29.5a8 8 0 012.9 8.94l-15.5 47.73a8 8 0 01-7.61 5.52h-50.18a8 8 0 01-7.61-5.52l-15.5-47.73a.........完整代码请登录后点击上方下载按钮下载查看