Question

颜色应该应用于数据字，但是它仅应用于光标。有什么想法我做错了吗？

<h2 class="hero__title h1"> Your<span class="typer" id="main" data-words="living room.,,bathroom.,,dining room.," style="color:blue" data-delay="100" data-deleteDelay="1000"></span>
<span class="cursor" data-owner="main" style="color:#F47268"></span><br>Reborn
</h2>

<script async src="https://unpkg.com/typer-dot-js@0.1.0/typer.js"></script>

Answer 1

您需要考虑使用data-colors，您可以在其中为每个单词指定不同的颜色，或者为所有内容指定一种颜色：

<h2 class="hero__title h1"> Your <span class="typer" id="main" data-words="living room.,,bathroom.,,dining room.," data-colors="blue,green,red" data-delay="100" data-deleteDelay="1000"></span>
<span class="cursor" data-owner="main" style="color:#F47268"></span><br>Reborn
</h2>

<script async src="https://unpkg.com/typer-dot-js@0.1.0/typer.js"></script>

参考：https://steven.codes/typerjs/docs/index.html#class-typer

Answer 2

在您的头部标签中，尝试以下操作：

<style>
  span.typer {
    color: blue !important;
  }
</style>

Answer 3

使用data-colors属性。它位于documentation

中

<h2 class="hero__title h1"> Your <span class="typer" id="main" data-words="living room.,,bathroom.,,dining room.," style="color:blue" data-delay="100" data-deleteDelay="1000" data-colors="blue"></span>
<span class="cursor" data-owner="main" style="color:#F47268"></span><br>Reborn
</h2>

<script async src="https://unpkg.com/typer-dot-js@0.1.0/typer.js"></script>

颜色未添加到第一个跨度

3 个答案: