<span> <i>1</i> <i>2</i> ... <i>59</i> </span>或者用伪元素创建也行
span::before{ content: '1\A 2\A 3\A ... 59' }这种方式需要创建多个标签,略微繁琐,也不易扩展。现在有更简洁的方式可以实现了,那就是 CSS @property[2]。这是干什么的呢?简单来讲,可以自定义属性,在这个例子中,可以让数字像颜色一样进行过渡和动画,可能不太懂,直接看例子吧。
<span style="--num: 0"></span>我们让这个自定义变量在页面中展示出来,单纯的 content无法直接显示自定义变量,需要借助计数器,有兴趣的可以参考这篇文章:小tips: 如何借助content属性显示CSS var变量值[3]
span::after{ counter-reset: num var(--num); content: counter(num); }
现在可以通过:hover改变这个数字
span:hover::after{ --num: 59 }
@property --num { syntax: '<integer>'; inherits: false; initial-value: 0; } span::after{ transition: 1s --num; }神奇的一幕发生了
// 堆代码 duidaima.com @keyframes num { to { --num: 10 } } span{ animation: num 1s infinite steps(10); }数字变化的基本原理就是这样了,一个无限循环的 CSS 动画!
// 堆代码 duidaima.com @keyframes minitus { to { --m: 59 } } @keyframes seconds { to { --s: 59 } } @keyframes ms { to { --ms: 99 } } span{ counter-reset: minitus var(--m) seconds var(--s) ms var(--ms); animation: minitus 3600s infinite steps(60, end), seconds 60s infinite steps(60, end), ms 1s infinite steps(100, end); } span::before{ content: counter(minitus, decimal-leading-zero) ':' counter(seconds, decimal-leading-zero) ':' counter(ms, decimal-leading-zero); }这样就得到了一个自动运行的秒表
<div class="counter"> <input type="checkbox" id="start" hidden> <label class="btn start" for="start"></label> <label class="btn reset">重置</label> <div class="clock"></div> </div>因为需要通过input:checked来控制秒表的状态,需要借助后置兄弟选择器~来实现,所以input需要在前面(当然,现在有了:has也可以不需要这样)。这里可以通过grid布局来灵活摆放各个模块的位置
.counter{ display: grid; grid-template-areas: "clock clock" "start reset" } .start{ /**/ grid-area: start; } .reset{ /**/ grid-area: reset; }简单美化以后,可以得到这样的效果
.clock{ animation-play-state: paused;/*默认暂停*/ } .start::before{ content: '开始'; } :checked~.start::before{ content: '暂停'; } :checked~.clock{ animation-play-state: running; }这样就可以通过按钮手动控制开始和暂停了
.reset:active+.clock{ animation: none; }其次,重置一般只有在暂停时才可用,所以还需要用前面的:checked禁用一下,并且视觉上可以透明度降低一点,实现如下
:checked~.reset{ opacity: .65; pointer-events: none; }这样就得到了文章开头所示的效果
getComputedStyle($0).getPropertyValue('--ms')实时获取如下