/* ============================================================================= 达播工作台 — icons-solid.css **每个图标各自的选中动效**（乐哥 2026-10-08 23:26： 「动效的指的是，每个图标都有自己单独的动效，就很简单的那种」） ----------------------------------------------------------------------------- ⭐⭐ 2026-10-09 08:17 乐哥：「图标没问题，但是部分图标动画太弱了，看不出来， 你要都统一下动画时长，还有范围这些」。 ───────────────────────────────────────────────────────────────────────── 改前为什么"有的几乎看不出来"：每个图标**各写各的** —— 时长六种：0.42 / 0.44 / 0.5 / 0.55 / 0.62 / 0.8s； 幅度：平移 1.4 / 1.6 / 1.7 / 2.2px，旋转 3.5° / 9° / 14° / 70°。 ⇒ 小的那几套（单据色带 1.4px、钱包卡扣 1.6px、首页屋顶 1.7px）在 22px 下 只有 **1.2~1.6 个 CSS 像素**的位移，肉眼基本看不出来。 ✅ 现在：下面 `.is` 里那 8 个令牌是**全站唯一来源**； 18 个图标**只允许换"动哪一层、往哪个方向"，不许再各写各的时长/幅度**。 幅度按图标高度的 ~17% 定（24 视图单位 × 17% ≈ 4 单位 ⇒ 22px 下约 3.7px， 比改前最小的那套大 3 倍多，且大图标小图标都是同一个比例）。 ----------------------------------------------------------------------------- 用法：给 svg 加 `is-on` 类即播放一次（约 0.5s），播完自动回到静止态 ⇒ 想重放就**先移除再加**（`el.classList.remove('is-on'); void el.offsetWidth; el.classList.add('is-on');`） ⚠️ 层级钩子由 icons-solid.js 生成：每层是独立 ，类名 `is-a-<动效名>` ⇒ 本文件用 `.is-<图标名>.is-on .is-a-<名>` 精确命中，**不碰其它图标**。 ⚠️ SVG 变换必须 `transform-box: fill-box`（否则 transform-origin 参照的是整个 svg 而非该层）。 ⚠️ 描边"画出来"的动效：静止态 = 完整显示（dashoffset:0），只在播放时 1 → 0 ⇒ 即使动画被禁用/不支持，图标也是完整的（安全兜底）。 靠 `pathLength="1"`（icons-solid.js 加的）⇒ 不管路径实际多长， `stroke-dasharray: 1` + `1 → 0` 都正好是"画满一遍" —— 这就是"范围统一"在描边类的做法 （改前每条各写 13 / 14 / 26 三个数）。 ⚠️ 描边用**不带回弹**的缓动：回弹会让 `stroke-dashoffset` 变负数 ⇒ 勾会先缩一下再画，看着像故障。 ============================================================================= */ .is { /* ---- 统一规格（改这里 = 18 个图标一起变；别在下面各写数字） ---- */ --nav-anim-dur: 500ms; /* 时长：统一 */ --nav-anim-ease: cubic-bezier(.34, 1.32, .64, 1); /* 缓动：位移/缩放/旋转（带轻微回弹） */ --nav-anim-ease-draw: cubic-bezier(.25, 0, .25, 1); /* 缓动：描边画线（不许回弹） */ /* 缓动：**旋转专用**（不许回弹）。2026-10-09 08:30 乐哥：「系统设置图标转动有点点生硬」 ⇒ 生硬的来源是那条"带过冲"的曲线：转到 0° 后还会越过去再荡回来， 在位移上叫"回弹"（好看），在旋转上读起来就是"卡了一下"。 ⚠️ 位移/缩放仍用带过冲的 --nav-anim-ease（那是它们好看的原因），**别把这条通用化**。 */ --nav-anim-ease-rot: cubic-bezier(.22, .68, .35, 1); --nav-anim-move: 4px; /* 位移幅度（24 视图单位 ≈ 图标高度 17%） */ --nav-anim-shrink: .60; /* 缩小 / 长出 的起幅（60% → 100%，变化 40%：一眼看得见） */ --nav-anim-peek: 1.14; /* "弹一下"的过冲峰值 */ --nav-anim-rot: 24deg; /* 旋转幅度（改前 3.5°~70° 各写各的，取中偏大） */ --nav-anim-stagger: 100ms; /* 多部件依次出现的间隔 */ } .is { display: block; } .is .is-a-roof, .is .is-a-head, .is .is-a-back, .is .is-a-clasp, .is .is-a-area, .is .is-a-top, .is .is-a-lid, .is .is-a-b1, .is .is-a-b2, .is .is-a-b3, .is .is-a-band, .is .is-a-fold, .is .is-a-gear, .is .is-a-blk, .is .is-a-seal, .is .is-a-front, .is .is-a-yuan, .is .is-a-cog, /* 2026-10-09 08:30 新增/改名的层：日历白点两行 / 包裹箱体 / 计算器按键与屏幕 / 汇报折线 */ .is .is-a-d1, .is .is-a-d2, .is .is-a-box, .is .is-a-keys, .is .is-a-screen, .is .is-a-trend { transform-box: fill-box; transform-origin: center; } /* 兜底：**任何**一层都按"自身外框居中"变换。 ⚠️ 必须给兜底 —— SVG 元素的默认 transform-origin 是 `0 0`（整个画布左上角）， 漏了这一条时"整图标缩放"会从左上角放大，看着像图标在往右下跑。 ⚠️ 具体图标的 `transform-origin: center bottom / right bottom / left bottom`（长柱子、折角、前板） 特异性更高（0,3,0 > 0,2,0），会正常覆盖本行。 */ .is .is-i { transform-box: fill-box; transform-origin: center; } /* 描边层的静止态 = 完整显示（含 2026-10-09 新增的 ¥ 与汇报折线） */ .is .is-a-line, .is .is-a-check, .is .is-a-trend, .is .is-a-yuan { stroke-dasharray: 1; stroke-dashoffset: 0; } /* ══════════════════ 统一的 8 个关键帧（只有"方向/形态"不同） ══════════════════ */ @keyframes navUp { from { transform: translateY(calc(-1 * var(--nav-anim-move))) } to { transform: none } } @keyframes navDown { from { transform: translateY(var(--nav-anim-move)) } to { transform: none } } @keyframes navRight { from { transform: translateX(var(--nav-anim-move)) } to { transform: none } } @keyframes navGrowY { from { transform: scaleY(var(--nav-anim-shrink)) } to { transform: scaleY(1) } } @keyframes navPopUp { 0% { transform: scale(var(--nav-anim-shrink)) } 62% { transform: scale(var(--nav-anim-peek)) } 100% { transform: scale(1) } } @keyframes navRotR { from { transform: rotate(var(--nav-anim-rot)) } to { transform: rotate(0deg) } } /* 齿轮专用：**整圈旋转**。齿轮是 8 齿对称（每 45° 一个齿距）， 转 24° 会停在"齿中间"，看着像卡住；转**整圈**落点与起点完全重合 ⇒ 绝对不会卡齿、也不需要回弹。 ⚠️ 这是旋转的**第二档**（局部角度 navRotR / 整圈 navSpin），两档都走 --nav-anim-ease-rot。 */ @keyframes navSpin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } @keyframes navDraw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } } /* ══════════════════ 18 个图标：只指定"哪一层 + 哪个方向" ══════════════════ */ /* 首页：屋顶抬起落下 */ .is-home.is-on .is-a-roof { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 个人区：头往下轻点 */ .is-user.is-on .is-a-head { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); } /* 达人信息：**后面那个人"冒出来"** ⚠️ 2026-10-09 08:30 改版（乐哥：「达人信息…这个不直观，看看有没其他动画」）： 原动画是"后面那个人往上浮 4px" —— 它是浅色小块又被前面的人挡着一半，位移看不出来。 ⇒ 改成**放大出现**（`navPopUp`），幅度落在"整块形状"上，一眼看懂"第二个人来了"。 */ .is-users.is-on .is-a-back { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 我的（钱包）：**整个图标弹一下** ⚠️ 2026-10-09 08:30 改版（乐哥：「我的…这个不直观，看看有没其他动画」）： 原动画是"卡扣往外弹 4px" —— 卡扣本身只有几个像素宽，位移再大也看不出来。 ⇒ 改成整个钱包放大回落（`navPopUp`，60% → 114% → 100%），幅度落在"整块形状"上。 */ .is-wallet.is-on .is-i { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 结算与对账（**新图标** walletYuan）：让中间那个白色 ¥ 弹出来 */ .is-walletYuan.is-on .is-a-yuan { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 经营分析：面积从底部长出来 + 折线画出来 */ .is-lineChart.is-on .is-a-area { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease); } .is-lineChart.is-on .is-a-line { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); } /* 直播排期：**5 个白点从上方落进日历**（上排 3 个先落、下排 2 个后落） ⚠️ 2026-10-09 08:30 改版（乐哥：「动画做成哪几个日历的白点落在日历上，会不会更好」）： 原来动的是"顶部色带往上抬"，与"排期/日历"这层意思没关系，也几乎看不出来。 ⚠️ 顶部色带与吊环现在**不动** —— 一次点击只留一个视觉焦点，两处一起动会互相抢。 */ .is-calendarDays.is-on .is-a-d1 { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); } .is-calendarDays.is-on .is-a-d2 { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; } /* 货品与佣金：**上下两半对向合拢**（盖子上落下 + 箱体下抬起，同长同缓动 ⇒ 中间会合） ⚠️ 2026-10-09 08:30 改版（乐哥：「货品佣金做成上下两部分自然合一起会不会好点」）： 原来只有盖子单向往上抬，读起来像"盖子飞走了"。 ⚠️ 白胶带跟箱体一起走（写在数据里，`a:'box'`）。 */ .is-package.is-on .is-a-lid { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); } .is-package.is-on .is-a-box { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); } /* 业绩管理：三根柱子从底部长出来（依次，间隔统一） */ .is-barChart3.is-on .is-a-b1 { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease) backwards; } .is-barChart3.is-on .is-a-b2 { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; } .is-barChart3.is-on .is-a-b3 { transform-origin: center bottom; animation: navGrowY var(--nav-anim-dur) var(--nav-anim-ease) calc(var(--nav-anim-stagger) * 2) backwards; } /* 售后分析：对勾画出来 */ .is-shieldCheck.is-on .is-a-check { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); } /* 成本管理：顶部色带往上抬 */ .is-receipt.is-on .is-a-band { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 月度汇报：折角翻开（以右下角为轴） */ .is-fileText.is-on .is-a-fold { transform-origin: right bottom; animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); } /* 系统设置：齿轮**转整圈**（乐哥 2026-10-09 08:30：「系统设置图标转动有点点生硬」） ▸ 生硬的两个来源都堵掉了：① 缓动换成不回弹的 --nav-anim-ease-rot； ② 幅度换成整圈 —— 原来 24° 会停在"齿中间"（齿轮每 45° 一个齿距），像卡住。 ⚠️ 这里的旋转是**一次性**的（`is-on` 播一次就停），不是 motion-system ⑬ 管的那种 `infinite` 循环转圈 —— 所以时长跟全站统一的 500ms，不套 0.8s。 ⛔ 哪天有人把它改成 `infinite`（比如做"载入中"），必须同时按 ⑬ 改成 0.8s。 */ .is-settings.is-on .is-a-gear { animation: navSpin var(--nav-anim-dur) var(--nav-anim-ease-rot); } /* 门户：四格里绿色那一格弹出来 */ .is-layoutDashboard.is-on .is-a-blk { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 人事行政 / 我的提成：徽章转一下 + 对勾画出来 */ .is-badgeCheck.is-on .is-a-seal { animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); } .is-badgeCheck.is-on .is-a-check { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw) var(--nav-anim-stagger); } /* 项目管理：前板掀起（以左下角为轴） */ .is-folder.is-on .is-a-front { transform-origin: left bottom; animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); } /* 返点与结算：¥ 弹一下 */ .is-circleDollarSign.is-on .is-a-yuan { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 人事与成本：小齿轮转一下 */ .is-userCog.is-on .is-a-cog { animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); } /* 审批中心：对勾画出来 */ .is-checkSquare.is-on .is-a-check { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); } /* 自定义：成本管理（**新图标** 计算器）—— 四个按键"按一下" */ .is-costCalc.is-on .is-a-keys { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* 自定义：月度汇报（**新图标** 文档+上升折线）—— 折线画出来 */ .is-reportDoc.is-on .is-a-trend { animation: navDraw var(--nav-anim-dur) var(--nav-anim-ease-draw); } /* ══════════ 以下两个：2026-10-11 为 HR 侧栏补（图标改实心时新加的两个） ══════════ */ /* 刷脸记录（clock）：**指针回拨一格**（绕表盘中心转 24°） ⚠️⚠️ 必须 `transform-box: view-box` —— 指针是 stroke 层，若用 `fill-box`（其余图标继承的默认） 它的"包围盒"只有那根线自己 ⇒ 旋转中心成 (12, 9.75) 而不是圆心 (12,12)， 指针会**歪着转**（绕线的一端转），看着像故障。 ⚠️ 旋转用**不回弹**的 `--nav-anim-ease-rot`（与 fileText / settings / userCog 同款： 回弹曲线用在旋转上会读作"卡了一下"，2026-10-09 乐哥点过这条）。 */ .is-clock.is-on .is-a-hand { transform-box: view-box; transform-origin: 12px 12px; animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); } /* 门禁监控（alertTriangle）：**整个三角弹一下**（同 wallet 的做法 —— 幅度要落在"整块形状"上才看得出来；只动白色感叹号那个小点只有几个像素，看不见） */ .is-alertTriangle.is-on .is-i { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } /* ══════════ 2026-10-17：拆组后补的 5 个一级菜单图标（此前走降级 = 线条图标） ══════════ ⚠️ 动效名全部复用上面已登记的（lid / box / band / seal / top / blk / fold / front）—— 它们已有 `transform-box: fill-box; transform-origin: center` 兜底；新起名会让 transform-origin 落回 `0 0`，整块图形从左上角变形。 */ /* 样品管理（packageOpen）：两片盖子向上翻开 + 箱体下沉 */ .is-packageOpen.is-on .is-a-lid { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); } .is-packageOpen.is-on .is-a-box { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); } /* 佣金管理（percent）：斜杠弹一下，两个圆点随后弹出 */ .is-percent.is-on .is-a-band { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease); } .is-percent.is-on .is-a-seal { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; } /* 数据管理（upload）：箭头落进托盘，托盘随后弹一下 */ .is-upload.is-on .is-a-top { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); } .is-upload.is-on .is-a-blk { animation: navPopUp var(--nav-anim-dur) var(--nav-anim-ease) var(--nav-anim-stagger) backwards; } /* 日志与留痕（scrollText）：底卷转一下 + 卷轴主体落下 */ .is-scrollText.is-on .is-a-fold { animation: navRotR var(--nav-anim-dur) var(--nav-anim-ease-rot); } .is-scrollText.is-on .is-a-front { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); } /* 店铺代运营（shoppingBag）：提手向上提 + 袋体下沉 */ .is-shoppingBag.is-on .is-a-band { animation: navUp var(--nav-anim-dur) var(--nav-anim-ease); } .is-shoppingBag.is-on .is-a-front { animation: navDown var(--nav-anim-dur) var(--nav-anim-ease); } /* 尊重系统"减少动态效果" */ @media (prefers-reduced-motion: reduce) { .is.is-on [class*="is-a-"] { animation: none !important; } }