如何使文本平滑地从普通字体过渡到斜体字？

Question

有没有一种方法可以使我的用户将鼠标悬停在普通文本上时，文本平滑过渡为斜体或倾斜的文本，以显示它是一个链接（包括下划线）

以下是我试图实现的示例...

<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"*/ }

- C Bonner

---

不确定你能做到这一点，至少不能只用纯CSS。 - elclanrs

Answer 1

您可以使用CSS3 转换函数来模拟斜体文本。您还可以使用CSS3 过渡效果来获得您想要的平滑过渡。

.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

- Austin Brunkhorst

---

你是在从https://dev59.com/fXbZa4cB1Zd3GeqPKdVW复制答案吗？Austin Brunkhorst - Falguni Panchal

在法语中，我们称之为“mise en abîme” @Fags :D - user1636522

歪斜的文本与斜体或倾斜的文本非常不同（并且被排版师所不赞成）。因此，这并没有回答问题。 - Jukka K. Korpela

如果没有回答问题，请发布您的解决方案。- @JukkaK.Korpela - Austin Brunkhorst

这不是解决问题的方法。我的解决方案是在转换斜体字时您能得到的最佳方案。OP的目标是强调文本（斜体），而不是在排版层面上。 - Austin Brunkhorst

Answer 2

不，倾斜的文本并不等同于斜体文本。斜体字并不仅仅是倾斜字体，它完全不同。你可以在两者之间进行交叉淡化溶解，但倾斜无法给你正确的斜体文本。

- eablokker