有没有一种方法可以使用CSS3将文本的底部或顶部弯曲/弧形/弯曲？

Question

我想知道是否有可能只使用CSS / jQuery实现以下效果。 我已经知道如何将文本弯曲成圆形，但那会弯曲整个元素，我不知道如何仅将文本底部弯曲成圆形。 我猜我更希望扭曲文本，但我不知道如何最好地提问问题。

目的是允许像这样的元素用作跨横幅的动态实时文本。

如果你们能提供任何帮助，我将不胜感激。 非常感谢Fiddle。

- Rob

---

您可以使用HTML5画布来实现。您需要将文本切成垂直的片段，然后操纵这些片段以形成您所需的弧形文本。这里有一个不错的示例可供参考。然后您就可以像使用文本元素一样使用画布元素了。 - markE

我喜欢这个想法...这绝对是解决问题的一种方法.. 我想我可能需要反对这个.. 对于一个不重要的文本来说，这是很多额外的负担使其生效。 - Rob

无论如何！非常酷，可以玩得很开心！ :) - Rob

你指的是什么类型的动画？为什么不能只对静态图像进行动画处理？ - Lie Ryan

我可以做，但我必须把它分割。他们想要进行单独字母的动画。 - Rob

Answer 1

不行！CSS实际上不能像那样扭曲文本。您可以为每个字母使用不同的大小，然后将它们顶部对齐，但那不是完全相同的事情，而且它也不会是动态的。

编辑

markE提出了一种基于画布的解决方案，可能对您有用。这不是您要求的CSS解决方案，但也许JS操作能够得到您想要的：http://jsfiddle.net/AbdiasSoftware/e8hZy/。

- Tyler

---

是的，你可以！ :-) - markE

Answer 2

如果您不关心浏览器支持，也就是说，只需要在现代浏览器中运行，那么您可以使用SVG来实现这一点。

首先，您需要创建 SVG中的曲线文本。然后，您可以 SMIL动画单个SVG元素或 CSS动画单个SVG元素。

- Lie Ryan

---

我喜欢这个想法。它解决了问题，但很难重复使用。而且为每个使用此字体的场合创建独特的动画并不实际。但由于它是一个好答案，我会点赞，因为我没有在我的请求中指定这一点。 - Rob

@Rob：如果你愿意的话，你也可以使用JavaScript来控制动画，这样它就更具有可重用性。JavaScript可以迭代指定类别的SVG元素，并在每个元素上应用不同的动画或根据你编写的JavaScript设置不同的动画延迟，这样你就不必手动为每个元素添加动画了。 - Lie Ryan

如果没有更具体地说明动画，我们无法告诉您是否有一种不涉及脚本编写的更简单的方法来完成特定的动画。 - Lie Ryan

有趣，你有没有看到使用JS操作SVG动画的例子？我理解技术概念，但在创意概念方面仍感困扰。只需一些灵感即可。 - Rob

哦，由于某些原因我错过了你的五福表格链接。没关系。 - Rob

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>

- guest271314