纯CSS变量持久化状态实现：无限点击计数器方案求助

问题根源分析 #

你之前用counter结合动画的方案失效，核心原因是：动画触发时，counter-increment仅执行单次递增，且每次点击会重启动画，counter无法保留之前的累加值——动画始终从counter-reset的初始值开始执行，无法基于当前值继续递增。而checkbox/单选按钮的方案受限于控件数量，无法实现“近似无限”的递增需求。

推荐方案：利用@property实现可动画数字变量 #

该方案直接用CSS变量存储数字状态，支持无限递增，可直接用于calc()计算，且完全兼容你使用的Firefox 134版本。

完整代码

/* 定义可动画的数字类型变量，必须用@property声明才能支持动画修改 */
@property --count {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

#counter {
  --count: 0;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* 点击时触发极短动画，完成一次累加 */
#counter:active {
  animation: increment 0.01s forwards;
}

@keyframes increment {
  to {
    --count: calc(var(--count) + 1);
  }
}

/* 显示当前计数 */
#counter::after {
  content: " | Count: " var(--count);
  margin-left: 8px;
}

/* 示例：将状态变量用于calc计算 */
#counter:hover {
  transform: scale(calc(1 + var(--count) * 0.03));
  transition: transform 0.2s;
}

<button id="counter">Add 1</button>

方案原理

1. @property将--count声明为可动画的数字变量，允许动画修改其值并通过animation-fill-mode: forwards保持最终状态。
2. 每次点击按钮触发:active状态，执行一次极短的动画，将--count在当前值基础上加1。
3. 变量--count可直接代入calc()做数值计算，完全满足你的需求。
4. 没有数量限制，理论上可无限递增（受限于CSS数字精度，日常使用足够）。

兼容旧版Firefox的备选hack方案（无需@property） #

如果需要兼容Firefox 113以下版本，可通过伪元素计数+:focus-within保持状态：

#counter {
  counter-reset: count 0;
  position: relative;
  padding: 8px 16px;
  font-size: 16px;
  outline: none;
}

/* 点击时生成隐藏伪元素，触发counter递增 */
#counter:active::before {
  content: "";
  position: absolute;
  visibility: hidden;
  counter-increment: count;
}

/* 保持焦点状态，确保多次点击能持续累加 */
#counter:focus-within::before {
  content: "";
  position: absolute;
  visibility: hidden;
  counter-increment: count;
}

#counter::after {
  content: " | Count: " counter(count);
  margin-left: 8px;
}

/* 注：counter无法直接用于calc，需借助伪元素content转变量（略复杂），优先推荐@property方案 */

内容的提问来源于stack exchange，提问作者Louis P