随机数皮肤

随机数工具（ElementType.RandomNumber）显示一个大号数字，滚动时快速变化、停止后定格。源码 src/components/DrawEl/el-random-number.vue。

规范

• 直接写裸 CSS，不加任何外层选择器：写 .value { ... } 即可，系统会自动把它 scope 到本皮肤。
• 别动 font-size：字号由面板控制，改了会错位。
• 背景按需透明：根容器默认透明，皮肤可加底色。
• 动画：@keyframes 写在顶层、名字带本皮肤前缀以免撞名。.value.rolling 状态可用于添加滚动时的视觉效果。
• 数字用 tabular-nums：已内置等宽数字，皮肤无需重复设置。

DOM 结构

<div class="random-number">
  <span class="value">42</span>
  <!-- 滚动时额外带 .rolling 类 -->
</div>

类名	含义
.random-number	根容器（背景 / 圆角 / padding / 居中布局）
.value	数字文字（等宽）
.value.rolling	滚动中状态（默认 opacity 0.88，可覆盖）

示例

金色发光数字：

.random-number {
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(40, 30, 10, 0.92), rgba(20, 15, 5, 0.92));
  border: 1px solid rgba(255, 200, 80, 0.3);
}

.value {
  color: #ffd700;
  text-shadow:
    0 0 16px rgba(255, 215, 0, 0.5),
    0 0 32px rgba(255, 215, 0, 0.3);
}

.value.rolling {
  opacity: 1;
  filter: blur(0.5px);
}

想偷懒？用 AI 帮你写皮肤 一键生成带规范的提示词。