时间戳

首页 > 解决方案 > 单独设置字符串的每个字母的样式

javascript - 单独设置字符串的每个字母的样式

问题描述

我的网站上有一个实时计数器，我希望它看起来像这样：

柜台

计数器基本上是一个简短的脚本，它输出一个由多个数字组成的字符串。我想像上面屏幕截图中的数字一样设置这个字符串的样式，但我似乎找不到一种方法，可以让我这样做。

我做了一些研究，发现有人也想为单个字符设置样式，但他们想用固定字符来做，所以他们只使用了多个跨度，我当然做不到……</p>

这是计数器的 HTML 端：

<span class="value_timer">00</span>

有人知道我该怎么做吗？

标签： javascripthtmlcss

解决方案

在不使用 JavaScript 的情况下实现此目的的一种方法可能是使用线性渐变背景。

.value_timer {
  display: inline-block;
  font-family: "Courier New", monospace; /* Must be a monospace font */
  font-size: 32px;
  color: #FFF;
  letter-spacing: .5em;
  text-indent: .2em;
  background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) .2em, rgba(255,255,255,0) .2em), /* Hide extra BG caused by text-indent */
              linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%);
  background-size: 100%, 1.1em;
}
<span class="value_timer">123456789</span>

推荐阅读