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

我期待着看看是否有可能使纯粹的CSS/jQuery产生以下效果。我已经知道如何将文本弯曲成圆形，但是弯曲了整个元素，我无法弄清楚如何将文本底部弯曲成圆形。我想我正在寻找更多扭曲的文字，但我不知道如何最好地问这个问题。有没有办法弯曲/弧/只弯曲文字的底部或顶部使用CSS3

目的是为了让这些元素可以用作跨横幅动画生动的文字。

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

来源

2016-01-19 Rob

不，不可能。 –

您可以使用html5画布来做到这一点。你所做的是将文本切分为垂直切片，然后操作这些切片以形成拱形文本。这是一个[如何做的很好的例子]（http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric- JS）。然后，您可以像使用文本元素一样使用画布元素。 – markE

我喜欢这个想法......它绝对是解决问题的一种方法..我想我可能需要推回这一个......对于一个非重要的文本来说，这是一个很大的开销。 – Rob

如果您不关心浏览器的支持，即如果这个o很少需要在现代浏览器中工作，那么你可以通过使用SVG来实现这一点。您需要创建curved text in SVG。那么你SMIL animate the individual SVG element或CSS animate the individual SVG element。

来源

2016-01-20 00:50:00

我喜欢这个想法。这解决了这个问题，但很难重用。并且不得不为每种使用这种字体创建独特的动画是不切实际的。但由于这是一个很好的答案，我会赞成，因为我没有指定这是我的要求。 – Rob

@Rob：如果你愿意，你也可以使用javascript来控制动画，所以它更加可重用。javascript可以用指定的类遍历SVG元素，并在每个元素上应用不同的动画，或者根据您编写的任何JavaScript设置不同的动画延迟，因此您不必亲手动画每个元素。 –

没有更具体的动画，我们不能告诉你是否有更简单的方法来执行不涉及脚本的特定动画。 –

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

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

编辑

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

来源

2016-01-19 23:18:23 tyler

是的，[你可以！]（http://stackoverflow.com/questions/19544735/how-to-make-rooftext-effect-and-valley-text-effect-in-html5-or-fabric-js）： - ） – markE

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>

来源

2016-01-19 23:49:44 guest271314

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

回答

相关问题