gsap实现按钮按住不放删除动画代码-html代码-BFW代码库

gsap实现按钮按住不放删除动画代码

代码语言：html

所属分类：其他

代码由minimax-v3 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：按钮按住不放删除动画

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hold to Delete · GSAP</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background: radial-gradient(ellipse at top, #1a1230 0%, #07060d 60%, #000 100%);
    color: #e7ecf2;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Decorative grid background */
  .bg-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(rgba(255, 71, 87, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 71, 87, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  }
  .bg-orb {
    position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0;
    opacity: 0.3;
  }
  .bg-orb.a { width: 400px; height: 400px; background: #ff4757; top: 10%; left: 10%; }
  .bg-orb.b { width: 350px; height: 350px; background: #5ad6a7; bottom: 10%; right: 10%; opacity: 0.2; }

  /* Layout */
  .stage {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 32px;
    padding: 24px;
  }
  .title {
    font-size: 14px; letter-spacing: 4px; text-transform: uppercase;
    color: #8a93a3; margin-bottom: 4px;
  }
  .title .accent { color: #ff4757; }
  .subtitle {
    font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 0%, #ff8a95 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Button container */
  .btn-wrap {
    position: relative; width: 200px; height: 200px;
    display: flex; align-items: center; justify-conten.........完整代码请登录后点击上方下载按钮下载查看