HTML – 渐进斜体？

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

最佳答案

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

首先,span是一个内联元素,变换适用于块元素.所以你要么使用div或p之类的块元素,要么在span上设置display：block.

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

始终将未加前缀的版本放在最后. Transforms should be unprefixed在即将推出的Firefox,Opera和IE版本中.

您还需要在类名前面加一个点.

像这样的东西：

CSS部分很简单

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

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

HTML：

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