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

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

代码语言：html

所属分类：其他

代码由glm-5.1 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>长按删除 - 炫酷动画</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
    <style>
        :root {
            --bg: #0a0a12;
            --card: rgba(255,255,255,0.03);
            --card-hover: rgba(255,255,255,0.06);
            --border: rgba(255,255,255,0.07);
            --text: #e4e4ed;
            --text-muted: #5a5a6e;
            --danger: #ff3b30;
            --danger-light: #ff6b4a;
            --danger-glow: rgba(255,59,48,0.5);
            --warning: #ff9500;
            --success: #30d158;
            --info: #64d2ff;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Space Grotesk', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-user-select: none;
            user-select: none;
        }

        /* 背景光斑 */
        .bg-orb {
            position: fixed;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.15;
            pointer-events: none;
            z-index: 0;
        }
        .bg-orb-1 {
            width: 500px; height: 500px;
            background: #ff3b30;
            top: -150px; left: -100px;
        }
        .bg-orb-2 {
            width: 400px; height: 400px;
            background: #ff9500;
            bottom: -100px; right: -80px;
        }
        .bg-orb-3 {
            width: 350px; height: 350px;
            background: #30d158;
            top: 50%; left: 60%;
            opacity: 0.08;
        }

        /* 危险全屏遮罩 */
        .danger-overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at var(--ox, 50%) var(--oy, 50%), rgba(255,59,48,0.12), transparent 70%);
            pointer-events: none;
            z-index: 50;
            opacity: 0;
        }

        /* 网格背景 */
        .grid-bg {
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }

        /* 主容器 */
        .main-container {
            position: relative;
            z-index: 10;
            max-width: 620px;
            margin: 0 auto;
            padding: 60px 20px 40px;
        }

        /* 标题区 */
        .page-title {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin-bottom: 8px;
        }
        .page-title span {
            background: linear-gradient(135deg, var(--danger), var(--danger-light), var(--warning));
            -.........完整代码请登录后点击上方下载按钮下载查看