创建标记觉得突出效果

-4

我想创建，当用户将鼠标悬停在文本它创建了一个市场的影响感到效果吧 - 完全一样在这里完成：http://courtneycarman.com/创建标记觉得突出效果

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

如何做到这一点的任何代码将是伟大的。

谢谢

2017-05-30 Henry Brown

预计你至少尝试为自己的代码这一点。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您所尝试的内容。 –

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

效果是通过一个: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>

来源

2017-05-30 14:26:56 Tschallacka

非常感谢，我可以检查它，但我无法解决它。非常感谢！ –

研究css过渡效果，玩弄不同的可能性。也可能很好看你看动画，添加多步动画。 – Tschallacka

创建标记觉得突出效果

回答

相关问题