如何使我的文本从左到右突出显示？

Posted 2023-03-04

【中文标题】如何使我的文本从左到右突出显示？

【英文标题】：How can I animate my text to highlight from left to right?

【发布时间】：2022-01-18 17:03:13

【问题描述】：

我一直在寻找一种方法来完成这项工作，但目前我找不到我想要的。

我想要突出显示此文本，并且我想将其动画化为从左到右。到目前为止，我已经设法让高光在设定的时间后出现，但没有从左到右的效果。

这是它现在的样子以供参考：

这是我用来实现这一点的 css：

@keyframes highlight 
    0% 
        background: none;
    

    100% 
        background: linear-gradient(to top, $light-purple 50%, transparent 50%);
    


h2 
    display: inline;
    animation-name: highlight;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;

我知道这是一个非常新手的问题，但老实说，考虑到我已经拥有的东西，我真的找不到正确的方法......如果有人可以提供帮助，我将不胜感激！

提前致谢

【问题讨论】：

你能提供一个可行的例子吗？

这能回答你的问题吗？ Animating Linear Gradient using CSS

如果可能的话，我建议添加足够的代码来构成minimal reproducible example，最好是作为可运行的sn-p，以及重现问题的步骤。这将大大有助于社区为您提供有用的指导。祝你好运，编码愉快！

【参考方案1】：

我找到了一个受this article启发的解决方案：

@keyframes highlight 
    from 
      background-position: 0;
    

    to 
      background-position: -100%;
    


h2 
    animation-name: highlight;
    animation-duration: 0.75s;
    animation-fill-mode: forwards;
    background-size: 200%;
    background-image: linear-gradient(to right, white 50%, transparent 50%), 
                      linear-gradient(transparent 50%, purple 50%);

<h2>Here is an example text that will have the highlight</h2>

【讨论】：

谢谢！这很有效。我唯一的问题是我希望将高光保持在文本高度的 50%，就像我放的图片一样。使用您的解决方案，这对我来说是不可能的，因为我使用 linear-gradient to top 来做到这一点。有什么想法我仍然可以实现吗？谢谢！

@almecin 我想你可以设置一个白色来隐藏高亮颜色，比如background-image: linear-gradient(to left, white 50%, transparent 50%), linear-gradient(transparent 50%, red 100%);，然后这个动画会滑动白色并显示高亮颜色。这将要求您根据文本的位置设置背景初始颜色。

我使用@aerial301的代码更新了我的答案

@aerial301 谢谢你们！！