创建标记毡高光效果答案

【问题标题】：Creating a marker felt highlight effect创建标记毡高光效果
【发布时间】：2017-05-30 22:37:07
【问题描述】：

我想创建一种效果，当用户将鼠标悬停在文本上时，它会产生一种市场感觉效果 - 就像这里所做的那样：http://courtneycarman.com/

我希望它以相同的方式制作动画。

任何关于如何做到这一点的代码都会很棒。

谢谢

【问题讨论】：

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： javascript html css

【解决方案1】：

下次右键单击，检查元素。它就在那里。但是，如果您不知道自己在寻找什么，则可能很难弄清楚。

效果由:hover 样式完成，该样式仅在元素悬停时激活。在这种情况下，它具有通常被 0 大小“隐藏”的渐变背景。当它悬停时，它被设置为 100% 大小。

然后定义了一个“过渡”，它将处理动画效果。

.semibold:hover {
    background-size: 100% 100%;
}

.semibold {
    background-image: linear-gradient(180deg,transparent 55%,#ffde17 0);
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.4s ease;

&lt;p&gt;here is some text and stuff&lt;strong class="semibold"&gt;and this is semibold&lt;/strong&gt;&lt;/p&gt;

【讨论】：

谢谢，这太好了，我是新手，我可以检查它，但我无法解决。非常感谢！
研究css过渡效果，玩转各种可能性。你也可以看看动画，添加多步动画。