Question

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

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

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

由于

Answer 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;

<p>here is some text and stuff<strong class="semibold">and this is semibold</strong></p>

创建标记感觉突出效果

1 个答案: