渐变斜体？

Question

有没有办法逐渐从普通文本转换为斜体字,每个字符都会略微改变倾斜角度？

Answer 1

Robin的想法确实有效(DEMO),但是这个小提琴有很多不妥之处我不确定我是否可以将它们纳入一个评论中.

首先,span是一个inline元素,并transform在block元素上工作.让你无论是使用block元素像div或者p或者你设置display: block的span.

不要用skew!使用skewX.skew在早期的草案中出现了,并且自那时起就被删除了.它甚至不受Firefox 14支持,但由于兼容性原因它在Firefox 15中重新引入,仍然适用于Chrome,Safari和Opera.

始终将未加前缀的版本放在最后.在即将推出的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);
}

为了逐渐从普通文本转换为倾斜文本,您需要转换或关键帧动画.

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); }
}