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

代码语言：html

所属分类：其他

代码由deepseek-v4-pro 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>按住删除按钮 - GSAP 炫酷动画</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js">
    </script>
    <style>
        :root {
            --btn-size: 110px;
            --ring-size: 140px;
            --bg: #0a0a0f;
            --btn-bg: #1a1a2e;
            --btn-bg-hover: #1f1f35;
            --red: #ff3b5c;
            --red-bright: #ff5e7a;
            --red-dark: #c0203e;
            --orange: #ff6b4a;
            --gold: #ffb347;
            --glow-red: rgba(255, 59, 92, 0.6);
            --glow-orange: rgba(255, 107, 74, 0.5);
        }

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

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: var(--bg);
            background-image:
                radial-gradient(ellipse at center, #1a1a30 0%, #0a0a0f 70%),
                radial-gradient(circle at 30% 40%, rgba(255, 59, 92, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(255, 107, 74, 0.04) 0%, transparent 50%);
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            overflow: hidden;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            cursor: default;
        }

        /* 背景粒子装饰 */
        .bg-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .bg-particle {
            position: absolute;
            border-radius: 50%;
            background: var(--red);
            opacity: 0;
            animation: floatUp 6s infinite;
        }

        @keyframes floatUp {
            0% {
                opacity: 0;
                transform: translateY(100vh) scale(0);
            }
            15% {
                opacity: 0.6;
            }
            30% {
                opacity: 0.2;
            }
            100% {
                opacity: 0;
                transform: translateY(-10vh) scale(1.5);
            }
        }

        /* 主容器 */
        .main-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 28px;
            z-index: 10;
        }

        /* 按钮外层包裹 */
        .btn-wrapper {
            position: relative;
            width: var(--ring-size);
            height: var(--ring-size);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Canvas粒子层 */
        #particleCanvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 320px;
            height: 320px;
            pointer-events: none;
            z-index: 5;
            border-radius: 50%;
        }

        /* SVG进度环 */
        .progress-ring-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            width: var(--ring-size);
            height: var(--ring-size);
            pointer-events: none;
            z-index: 8;
        }

        .progress-ring-container svg {
            width: 100%;
            height: 100%;
        }

        .ring-bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.06);
            stroke-width: 5;
            transition: stroke 0.5s ease;
        }

        .ring-progress {
            fill: none;
            stroke: var(--red);
            stroke-width: 5;
            stroke-linecap: round;
            stroke-dasharray: 364.42;
            stroke-dashoffset: 364.42;
            transition: stroke 0.3s ease;
            filter: url(#ringGlow);
        }

        .ring-progress.near-complete {
            stroke: var(--orange);
        }
        .ring-progress.completing {
            stroke: var(--gold);
        }

        /* SVG发光滤镜 */
        .glow-filter-defs {
            position: absolute;
            width: 0;
            height: 0;
        }

        /* 按钮主体 */
        .delete-btn {
            position: relative;
            width: var(--btn-size);
            height: var(--btn-size);
            border-radius: 50%;
            background: var(--btn-bg);
            border: 2px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            outline: none;
            -webkit-tap-highlight.........完整代码请登录后点击上方下载按钮下载查看