有没有办法使用 CSS3 仅弯曲/弧形/弯曲文本的底部或顶部答案

【问题标题】：Is there a way to curve / arc / bend only the bottom or top of text using CSS3有没有办法使用 CSS3 仅弯曲/弧形/弯曲文本的底部或顶部
【发布时间】：2016-04-25 15:10:23
【问题描述】：

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

目的是允许将诸如此类的元素用作跨横幅的动画实时文本。

如果你们能提供任何帮助，我将不胜感激。小提琴将不胜感激。

【问题讨论】：

您可以使用 html5 画布来完成。您所做的是将文本切成垂直切片，然后操作这些切片以形成拱形文本。这是nice example of how to do it。然后你就可以像使用文本元素一样使用 canvas 元素了。
我喜欢这个主意...这绝对是解决问题的一种方法..我想我可能需要推迟这个...对于一个不重要的部分来说，这是一个很大的开销文本使其生效。
无论如何！玩起来真的很酷！ :)
你指的是什么样的动画？为什么不能只为静态图像制作动画？
我可以，但我必须把它剪掉。他们想做单独的字母动画。

标签： javascript jquery html css

【解决方案1】：

不！ CSS 实际上不能像那样扭曲文本。

您可以想象为每个字母使用不同的大小，然后让它们在顶部对齐，但这并不完全相同，也不是动态的。

编辑

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

【讨论】：

是的，you can! :-)

【解决方案2】：

如果您不关心浏览器支持，即只需要在现代浏览器中工作，那么您可以使用 SVG 来做到这一点。

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

【讨论】：

我喜欢这个主意。这解决了问题，但很难重用。并且必须为每次使用这种字体创建独特的动画是不切实际的。但由于这是一个很好的答案，我会投赞成票，因为我没有指定这是我的要求。
@Rob：如果你愿意，你也可以使用javascript来控制动画，这样更可重用。 javascript 可以迭代具有指定类的 SVG 元素，并在每个元素上应用不同的动画，或者根据您编写的任何 javascript 设置不同的动画延迟，因此您不必手动为每个元素设置动画。
没有更具体的动画，我们无法告诉您是否有更简单的方法来制作不涉及脚本的特定动画。
有意思，你见过使用js操作svg动画的例子吗？我明白了技术的想法。但我在创意概念上苦苦挣扎。只是需要一些灵感。
啊，由于某种原因，我错过了您的五福表格链接。太酷了。

【解决方案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;
}

&lt;div&gt;&lt;i&gt;E&lt;/i&gt;&lt;i&gt;s&lt;/i&gt;&lt;i&gt;t.&lt;/i&gt;&lt;i&gt;1&lt;/i&gt;&lt;i&gt;9&lt;/i&gt;&lt;i&gt;7&lt;/i&gt;&lt;i&gt;0&lt;/i&gt;&lt;/div&gt;

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

&lt;div&gt;&lt;i&gt;E&lt;/i&gt;&lt;i&gt;s&lt;/i&gt;&lt;i&gt;t.&lt;/i&gt;&lt;i&gt;1&lt;/i&gt;&lt;i&gt;9&lt;/i&gt;&lt;i&gt;7&lt;/i&gt;&lt;i&gt;0&lt;/i&gt;&lt;/div&gt;

【讨论】：