仅使用 JavaScript 和 CSS 从左到右淡入文本

Question

我正在尝试为我的 stream 发出自己的警报，为此我需要从 streamlabs 获取文本（我认为 getElementById 会起作用），然后我必须从左到右淡化文本（或整个 HTML 标签）。

我可以使用 CSS 使文本消失，但我不能让它像这张图片一样。

我应该怎么办？

Answer 1

你可以使用这个，如果需要更多帮助告诉我。

 .image-border{ position: fixed; width: 100vw; height: 50vh; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: gray; display: block; }.image-text-center{ display: flex; justify-content: center; align-items: center; color: white; width: 100%; height: 100%; font-size: 25px; }.image-text-center::after{ content:''; position: absolute; display: block; left: 0; top: 0; bottom: 0; margin: auto; width: 0; height: 25px; /* size of font-size text parent */ background-color: gray; transition: all 2500ms linear; box-shadow: 8px 0 15px 10px gray; }.image-border:hover.image-text-center::after{ width: 100%; box-shadow: 0 0 0 0 gray; }

 <div class="image-border" > <div class="image-text-center">HELLO WORLD!!</div> </div>

如果我的回答对您有帮助，请接受并投票，我将不胜感激；