html - 渐变斜体？

Question

有没有办法从普通文本逐渐过渡到斜体，稍微改变每个字符的倾斜 Angular ？

Answer 1

Robin 的想法确实可行(DEMO)，但是那个 fiddle 有很多问题，我不确定我能否将它们放入一条评论中。

首先，span 是一个inline 元素，而transform 作用于block 元素。因此，您要么使用 block 元素，例如 div 或 p，要么在 上设置 display: block跨度。

不要使用skew! 使用skewX。 skew 出现在早期的草稿中，此后已被删除。它甚至不受 Firefox 14 的支持，尽管由于兼容性原因它在 Firefox 15 中重新引入并且仍然可以在 Chrome、Safari 和 Opera 中使用。

总是把没有前缀的版本放在最后。 Transforms should be unprefixed在即将推出的 Firefox、Opera 和 IE 版本中。

类名前还需要一个点。

像这样:

<div class="skewme">Tyrannosaurus Rex</div>

CSS 部分很简单

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

为了逐渐从普通文本过渡到倾斜文本，您需要 transitions或 keyframe animations .

HTML:

<div class="skewme1">Tyrannosaurus Rex</div>

CSS:

.skewme1 {
    -webkit-animation: slowskew 1.5s infinite alternate;
           -moz-animation: slowskew 1.5s infinite alternate;
             -o-animation: slowskew 1.5s infinite alternate;
                animation: slowskew 1.5s infinite alternate;
}
@-webkit-keyframes slowskew {
    to { -webkit-transform: skewX(-20deg); }
}
@-moz-keyframes slowskew {
    to { -moz-transform: skewX(-20deg); }
}
@-o-keyframes slowskew {
    to { -o-transform: skewX(-20deg); }
}
@keyframes slowskew {
    to { transform: skewX(-20deg); }
}