LOREM，存有悲坐阿梅德consectetur回扣。基督，这时间之前，圣母，或更少跟踪他们在哪里，谁做所有这些的办公室的麻烦mollitiaq alppias被指责的乐趣原因，都能够及时提供接收或者是因为他们有一些正确的。并写入法律？欲望的劳动，因为他是一个伟大的人寻找自己，应选我们，从痛苦中获取的，在同一的一些这些，使美国的任何一个。这些症状恶化到我们这里来！
Lorem存有胡萝卜增强回扣。真相是非常痛苦的遭遇。
LOREM 自己消费胡萝卜增强回扣。但是，疼痛animi.Quidem，他不会接受这些的结果的生活，在快乐，不舒服的遭遇的时候这样做。不是所有的智慧，或自由运行。通过选择，我们将解释整个电影谴责！那。
<article class="article text-component">
<h1>Text backround effects</h1>
<p class="text–md text–subtle">⚠️ Hover over the links for different background effects.</p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, temporibus, aut officia minus sequi quae molestias beatae, qui ipsa <a class="text-bg-fx text-bg-fx–underline text-bg-fx–text-shadow" href="#0">mollitiaq alppias accusamus voluptate</a> ratione provident numquam iure quia aliquam tempore possimus consequatur vel. Iure atque enim in? Magnam quis cupiditate quia labore quaerat, eligendi nobis, ab similique harum nostrum nulla aliquam dolore adipisci ut. Eaque veniam nobis asperiores!
Lorem ipsum dolor sit amet <a class="text-bg-fx text-bg-fx–scale-x" href="#0">consectetur adipisicing elit</a>. Veritatis architecto doloribus perspiciatis.
Lorem <a class="text-bg-fx text-bg-fx–scale-y" href="#0">ipsum dolor</a> sit amet consectetur adipisicing elit. Sed, animi.Quidem harum dolores ab velit neque suscipit vitae pariatur, perspiciatis voluptatum molestiae facere ad tempora. Non omnis fugiat libero magnam sapiente vel. Optio a, enim explicabo totam amet omnis accusantium! Quod.
</article>
/* ——————————–
Title: Text Background Effects
Descr: A collection of text backgrounds animated on hover
——————————– */
.text-bg-fx {
background-repeat: no-repeat;
will-change: background-size;
transition: background-size .3s var(–transition-ease-in-out);
&:hover {
background-size: 100% 100%;
}
}
.text-bg-fx–scale-x {
padding: var(–space-xxxxs) 0;
background-image: linear-gradient(alpha(var(–color-primary), 0.2), alpha(var(–color-primary), 0.2));
background-size: 0% 100%;
}
.text-bg-fx–scale-y {
text-decoration: none;
background-image: linear-gradient(alpha(var(–color-primary), 0.2), alpha(var(–color-primary), 0.2));
background-size: 100% 2px;
background-position: center bottom;
}
.text-bg-fx–underline {
text-decoration: none;
background-image: linear-gradient(transparent calc(100% – 2px), var(–color-primary) 2px);
background-size: 0% 100%;
}
.text-bg-fx–text-shadow { // you can use this with the .text-bg-fx–underline effect
text-shadow: 2px 2px 0 var(–color-bg), -2px 2px 0 var(–color-bg);
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/259359.html