gsap+css实现多边形按钮鼠标悬浮变形正方形动画效果代码-html代码-BFW代码库

gsap+css实现多边形按钮鼠标悬浮变形正方形动画效果代码

代码语言：html

所属分类：悬停

代码描述：gsap+css实现多边形按钮鼠标悬浮变形正方形动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
   
<style>
    @import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --bg-color: #ffffff;
  --gray: #d9d9d9;
  --blue: #6b9edf;
  --orange: #bb5e08;
  --pink: #ff6499;
  --yellow: #f5b726;
  --red: #850000;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
  	Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family: "Barlow", var(--font-system);
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: var(--pink);
  font-family: var(--font-family);
}

a {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px;
  opacity: 0.85;
  transition: opacity 150ms ease;
}

button {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  background: transparent;
  color: black;
  border: none;
  outline: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 0;
  font-size: 96px;
  font-weight: 100;
  text-transform: uppercase;
  transition: color 350ms ease;
  color: var(--pink);
}
button canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transition: transform 950ms ease;
}
button:hover {
  color: var(--pink);
}
button:hover canvas {
  transition-duration: 650ms;
  transform: scale(0.9);
}
</style>
</head>

<body>

    <button class="polygon-btn" aria-label="Close">=</button>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.12.2.js"></script>
    <script>
        
        const PI_2 = Math.PI * 2;
class PolygonBtn {
    constructor(el) {
        this.dom_element = el
        this.canvas = document.createElement("canvas")
        this.context = this.canvas.getContext("2d")
        this.dom_element.appendChild.........完整代码请登录后点击上方下载按钮下载查看