/* ============================================================ 彩剪 COLORCUT v77.10 · 琉璃宝石按钮 (06-jewel.css) ─ 「导出成片」鎏金流光宝石钮：五彩渐变流动 + 玻璃高光扫过 ─ 播放三角：琉璃圆钻 + 旋转彩虹光环 + 播放中呼吸辉光 ─ 预览大三角：玻璃圆钻 + 彩虹描环 + 星云辉光 本文件最后加载，安全覆盖旧样式；只改观感，不改布局尺寸 ============================================================ */ /* ---------- 1) 导出成片 · 鎏金流光宝石钮 ---------- */ #topbar #btnExport{ position:relative;isolation:isolate;overflow:hidden; border:none;border-radius:10px; padding:9px 20px 9px 16px; font-size:13.5px;font-weight:800;letter-spacing:.16em; color:#2b1804!important;text-shadow:0 1px 0 rgba(255,248,220,.6); background:linear-gradient(115deg, #ffe9a8 0%,#f2c268 13%,#ff9d58 28%,#ff5fa8 45%, #c06aff 61%,#4ad0ff 77%,#7ce8c8 90%,#ffe9a8 100%); background-size:300% 100%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 5px rgba(96,44,0,.4), 0 4px 14px rgba(0,0,0,.5), 0 0 20px rgba(255,138,92,.3), 0 0 38px rgba(176,106,255,.18); animation:gcFlow 6s ease-in-out infinite; transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s; } @keyframes gcFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} /* 玻璃斜向高光 · 每 4.6s 扫过一次 */ #topbar #btnExport::before{ content:'';position:absolute;top:-30%;bottom:-30%;left:-80%;width:42%;z-index:2; background:linear-gradient(105deg,transparent,rgba(255,255,255,.7) 45%,rgba(255,255,255,.12) 62%,transparent); transform:skewX(-20deg); animation:gcSheen 4.6s cubic-bezier(.55,.1,.3,.9) infinite; pointer-events:none; } @keyframes gcSheen{0%,52%{left:-80%}86%,100%{left:150%}} /* 顶部玻璃镀膜 */ #topbar #btnExport::after{ content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 30%,transparent 52%,rgba(80,34,0,.16) 100%); } #topbar #btnExport:hover{ transform:translateY(-2px) scale(1.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 5px rgba(96,44,0,.4), 0 10px 26px rgba(0,0,0,.55), 0 0 30px rgba(255,95,168,.42), 0 0 58px rgba(176,106,255,.3), 0 0 80px rgba(74,208,255,.18); } #topbar #btnExport:active{transform:translateY(1px) scale(.965);transition-duration:.08s} /* ---------- 2) 播放三角 · 琉璃圆钻 ---------- */ #controls #btnPlay{ position:relative;isolation:isolate;overflow:visible; width:46px;height:46px;border:none;border-radius:50%; color:#33200a; background: radial-gradient(130% 130% at 30% 20%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.35) 20%,rgba(255,255,255,0) 46%), conic-gradient(from 215deg,#ffe9a8,#bdeaff,#dcc8ff,#ffc4e2,#fff0c8,#ffe9a8); box-shadow: inset 0 2px 3px rgba(255,255,255,.8), inset 0 -3px 6px rgba(110,60,0,.45), inset 0 0 12px rgba(255,215,140,.4), 0 3px 10px rgba(0,0,0,.55), 0 0 16px rgba(212,162,74,.4); transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s; } /* 旋转彩虹光环 */ #controls #btnPlay::before{ content:'';position:absolute;inset:-5px;border-radius:50%;z-index:-1; background:conic-gradient(from 0deg,#f6da8e,#ff5fa8,#b06aff,#4ad0ff,#5cff9d,#f6da8e); filter:blur(5px);opacity:.42; animation:gcSpin 6s linear infinite; } @keyframes gcSpin{to{transform:rotate(360deg)}} #controls #btnPlay:hover{transform:scale(1.08);box-shadow: inset 0 2px 3px rgba(255,255,255,.85), inset 0 -3px 6px rgba(110,60,0,.45), inset 0 0 12px rgba(255,215,140,.45), 0 6px 16px rgba(0,0,0,.55), 0 0 26px rgba(255,95,168,.4), 0 0 48px rgba(176,106,255,.25)} #controls #btnPlay:hover::before{opacity:.75} #controls #btnPlay:active{transform:scale(.94);transition-duration:.08s} #controls #btnPlay svg{filter:drop-shadow(0 1px 0 rgba(255,250,230,.65))} /* 播放中：光环全开 + 呼吸辉光 */ #controls #btnPlay.playing{animation:gcBreath 1.7s ease-in-out infinite} #controls #btnPlay.playing::before{opacity:.95;filter:blur(6px)} @keyframes gcBreath{ 0%,100%{box-shadow:inset 0 2px 3px rgba(255,255,255,.8),inset 0 -3px 6px rgba(110,60,0,.45),inset 0 0 12px rgba(255,215,140,.4),0 3px 10px rgba(0,0,0,.55),0 0 14px rgba(212,162,74,.35),0 0 22px rgba(176,106,255,.16)} 50%{box-shadow:inset 0 2px 3px rgba(255,255,255,.8),inset 0 -3px 6px rgba(110,60,0,.45),inset 0 0 12px rgba(255,215,140,.4),0 3px 10px rgba(0,0,0,.55),0 0 24px rgba(255,95,168,.45),0 0 44px rgba(74,208,255,.28)} } /* ---------- 3) 预览大三角 · 玻璃圆钻 ---------- */ #pvFrame #pvBigPlay{ width:88px;height:88px;border:none;border-radius:50%; color:#ffe9b8; background: radial-gradient(125% 125% at 32% 22%,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 24%,transparent 48%), linear-gradient(160deg,rgba(44,34,66,.88),rgba(15,12,24,.92)); backdrop-filter:blur(10px) saturate(1.5); -webkit-backdrop-filter:blur(10px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -10px 22px rgba(0,0,0,.55), 0 14px 44px rgba(0,0,0,.65), 0 0 30px rgba(212,162,74,.32), 0 0 70px rgba(122,92,255,.22); transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; } /* 细彩虹描环（随 gcSpin 缓转） */ #pvFrame #pvBigPlay::before{ content:'';position:absolute;inset:-5px;border-radius:50%;z-index:-1; background:conic-gradient(from 0deg,#f6da8e,#ff5fa8,#b06aff,#4ad0ff,#5cff9d,#f6da8e); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px)); mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 2.5px)); animation:gcSpin 8s linear infinite;opacity:.9; } /* 星云辉光 · 呼吸 */ #pvFrame #pvBigPlay::after{ content:'';position:absolute;inset:-16px;border-radius:50%;z-index:-2; background:radial-gradient(circle,rgba(212,162,74,.28) 0%,rgba(176,106,255,.16) 45%,transparent 70%); animation:gcPulse 3.6s ease-in-out infinite; } @keyframes gcPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}} #pvFrame #pvBigPlay:hover{ transform:translate(-50%,-50%) scale(1.09); background: radial-gradient(125% 125% at 32% 22%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.14) 24%,transparent 50%), linear-gradient(160deg,rgba(56,42,88,.9),rgba(18,14,30,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -10px 22px rgba(0,0,0,.55), 0 16px 50px rgba(0,0,0,.7), 0 0 40px rgba(255,95,168,.4), 0 0 90px rgba(122,92,255,.32); } #pvFrame #pvBigPlay:active{transform:translate(-50%,-50%) scale(.96);transition-duration:.08s} #pvFrame #pvBigPlay svg{filter:drop-shadow(0 0 10px rgba(246,218,142,.85))} /* ---------- 4) 兼容与降级 ---------- */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #pvFrame #pvBigPlay{background:linear-gradient(160deg,rgba(54,42,84,.96),rgba(18,14,28,.98))} } @media (prefers-reduced-motion:reduce){ #topbar #btnExport,#topbar #btnExport::before, #controls #btnPlay,#controls #btnPlay::before,#controls #btnPlay.playing, #pvFrame #pvBigPlay,#pvFrame #pvBigPlay::before,#pvFrame #pvBigPlay::after{animation:none!important} }