有没有办法使用CSS3曲线/弧/弯曲文本的底部或顶部

Question

我正在寻找是否可以使用纯css / jquery来实现以下效果。我已经知道如何弯曲圆圈中的文本，但是会使整个元素弯曲，我无法弄清楚如何将文本的底部弯曲成圆形。我想我更倾向于歪曲文字，但我不知道如何最好地提出问题......

目的是允许将这些元素用作横幅上的动画实时文本。

我很感激你们的任何帮助。小提琴的人将不胜感激。

Answer 1

都能跟得上！ CSS实际上不能像这样扭曲文本。

你可以想象每个字母使用不同的大小，然后将它们对齐在顶部，但这不是完全相同的东西，它不会是动态的。

修改

markE提出了一个基于画布的解决方案，对您有用。它并不是你所要求的CSS解决方案，但也许JS操作会得到你想要的：http://jsfiddle.net/AbdiasSoftware/e8hZy/

Answer 2

如果您不关心浏览器支持，即如果只需要在现代浏览器中工作，那么您可以使用SVG来完成此操作。

首先，您需要创建curved text in SVG。然后是SMIL animate the individual SVG element或CSS animate the individual SVG element。

Answer 3

div i {
  font-family: sans;
  position: relative;
}

div i:nth-child(1) {
  font-size:.75em;
  top:-10px;
}

div i:nth-child(2) {
  font-size:1.25em;
  top:-8px;
}

div i:nth-child(3) {
  font-size:1.75em;
}

div i:nth-child(4) {
  font-size:2.25em;
  top: 6px;
}

div i:nth-child(5) {
  font-size:1.75em;
}

div i:nth-child(6) {
  font-size:1.25em;
  top: -6px;
}

div i:nth-child(7) {
  font-size:.75em;
  top: -10px;
}

<div><i>E</i><i>s</i><i>t.</i><i>1</i><i>9</i><i>7</i><i>0</i></div>

div i {
  font-family: sans;
}

div i:nth-child(1) {
  font-size:.75em;
}

div i:nth-child(2) {
  font-size:1.25em;
}

div i:nth-child(3) {
  font-size:1.75em;
}

div i:nth-child(4) {
  font-size:2.25em;
}

div i:nth-child(5) {
  font-size:1.75em;
}

div i:nth-child(6) {
  font-size:1.25em;
}

div i:nth-child(7) {
  font-size:.75em;
}

<div><i>E</i><i>s</i><i>t.</i><i>1</i><i>9</i><i>7</i><i>0</i></div>