从正常文本渐变到斜体文本？ [英] Fade from normal text to italics text smoothly?

问题描述

有一种方法可以让它，所以当我的用户悬停在正常文本是锚点，文本平滑过渡到斜体或斜体文本，以显示它是一个链接（包括下划线）

Is there a way to make it so when my user hovers over normal text that is an anchor, the text smoothly transitions into oblique or italicized text to show it is a link (including an underline)

这里是我想要做的例子...

Here's an example of what I'm trying to do...

<a href="http://oldsite.com">
<p class="footertext">Take me to the old site...</p>
</a>

---

---

p.footertext {
font-size:12px;
padding-left:4px;
text-decoration:none; }
p.footertext:hover {
/*text:decoration: "italicize smoothly"*/ }

推荐答案

您可以使用 CSS3变换函数来模拟斜体文本。您还可以使用 CSS3过渡来获得所需的平滑过渡。

You can use CSS3 transform functions to simulate italic text. You can also use CSS3 transitions to get the smooth transition you're looking for.

.italic {
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.italic:hover {
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
}

JSFiddle

这篇关于从正常文本渐变到斜体文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！