使用 @counter-style 的文字轮播

In the last article, we covered a few ways for generating character strings to be used for data obfuscation. We looked at the counter style systems: symbolic, alphabetic, and numeric. Now, let’s get into even more uses of @counter-style and discover additional systems.

在上一篇文章中，我们介绍了几种生成用于数据混淆的字符串的方法。我们探讨了计数器样式的系统：symbolic、alphabetic 和 numeric。现在，让我们深入了解 @counter-style 的更多用途，并发现更多的系统。

Word Rotator

单词轮播器

A word rotator is an interface designed to cycle through a predefined list of words or phrases within a static sentence. It serves as a tool to create visually appealing elements such as dynamic taglines and creative banners.

单词轮播器是一种界面设计，用于在静态句子中循环显示预定义的单词或短语列表。它作为一种工具，用于创建视觉上吸引人的元素，如动态标语和创意横幅。

This example is made with @counter-style:

这个示例是使用 @counter-style 制作的：

A Set of Words

一组单词

First, let’s compile a set of words that we’ll be rotating. These words will be stored in the symbols descriptor of @counter-style.

首先，让我们编译一组我们将要轮播的单词。这些单词将存储在 @counter-style 的 symbols 描述符中。

@counter-style words {
  symbols: startups enterprises nonprofits educators visionaries;
}Code language: CSS (css)

Similar to an array, we can maintain a group of words through the @counter-style declaration and later access each word based on its index/count. The system option for this is cyclic, which allows us to loop through predefined lists of symbols. It sequentially processes the provided symbols and automatically resets to the beginning of the list once the final item is reached.

与数组类似，我们可以通过 @counter-style 声明来维护一组单词，之后根据其索引/计数来访问每个单词。对应的系统选项是 cyclic，它允许我们循环遍历预定义的符号列表。它会按顺序处理提供的符号，并在到达最后一项时自动重置到列表的开头。

@counter-style words {
  system: cyclic;
  symbols: startups enterprises nonprofits educators visionaries;
}Code language: CSS (css)

Let’s illustrate how cyclic works with a list using an example:

让我们通过一个例子来说明 cyclic 如何与列表配合工作：

Notice that by the fourth list item, the list marker has cycled back to “a”.

请注意，到第四个列表项时，列表标记已经循环回到了“a”。

The Index/Count

索引/计数

For an array in JavaScript, we’d use a for loop to increment a number and use it as an index to...