平滑地从普通文本淡入斜体文本

Fade from normal text to italics text smoothly?

本文关键字：文本 淡入 斜体 平滑      更新时间：2023-09-26

有没有办法做到这一点，当我的用户将鼠标悬停在作为锚点的普通文本上时，文本会平滑地过渡到倾斜或斜体文本以显示它是一个链接（包括下划线）

这是我正在尝试做的事情的一个例子...

<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 过渡来获得所需的平滑过渡。

.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

No.倾斜文本与斜体文本不同。斜体字体不仅仅是一种倾斜的字体，它是完全不同的。您也许可以在两者之间交叉淡入淡出，但倾斜不会为您提供正确的斜体文本。

相关文章：