使用 HTML 和 CSS 的曲线文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14990284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Curved Text using HTML & CSS
提问by Fifer Sheep
I know there is already a post about curved text, but I'm looking for something specific.
我知道已经有一篇关于弯曲文本的帖子，但我正在寻找特定的内容。
On this webpage (http://mrcthms.com/) Marc uses a nice technique to curve the text for his name, but I cannot work out for the life of me how to replicate the technique. Here is what I'm trying:
在这个网页 ( http://mrcthms.com/) 上，Marc 使用了一种很好的技术来为他的名字弯曲文本，但我一生都无法弄清楚如何复制该技术。这是我正在尝试的：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" x-undefined="" />
<title>Curved Text</title>
<style type="text/css">
span {
display: inline-block;
font-family: futura-pt, 'Helvetica Neue', sans-serif;
font-size: 2.5em;
font-weight: 300;
margin: 1px;
}
.arced {
display: block;
text-shadow: rgba(0, 0, 0, 0.298039) 8px 8px;
text-align: center;
margin: 20px;
padding: 50px 0 50px;
}
div span {
text-shadow: rgba(0, 0, 0, 0.298039) 8px 8px;
font-family: futura-pt, 'Helvetica Neue', sans-serif;
font-size: 2.5em;
font-weight: 300;
}
.arced > span:nth-child(1) {
-webkit-transform:translateX(-1px) translateY(68px) rotate(-17deg);
-webkit-transition:0s;
}
</style>
</head>
<body>
<span class="arced">
<span class="char1">S</span>
<span class="char2">T</span>
<span class="char2">E</span>
<span class="char3">V</span>
<span class="char4">E</span>
</span>
</body>
</html>
采纳答案by BenM
He uses CSS3 transforms on each letter. For example, the HTML for his name is as follows:
他对每个字母使用 CSS3 转换。例如，他名字的 HTML 如下：
<span class="arced">
<span class="char1">M</span>
<span class="char2">a</span>
<span class="char3">r</span>
<span class="char4">c</span>
...
</span>
And in turn, the CSS is as follows:
反过来，CSS 如下所示：
.show .hero h1 .arced > span:nth-child(1) {
-webkit-transform: translateX(-1px) translateY(68px) rotate(-17deg);
-moz-transform: translateX(-1px) translateY(68px) rotate(-17deg);
-ms-transform: translateX(-1px) translateY(68px) rotate(-17deg);
-o-transform: translateX(-1px) translateY(68px) rotate(-17deg);
transform: translateX(-1px) translateY(68px) rotate(-17deg);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.show .hero h1 .arced > span:nth-child(2) {
-webkit-transform: translateX(-3px) translateY(39px) rotate(-13deg);
-moz-transform: translateX(-3px) translateY(39px) rotate(-13deg);
-ms-transform: translateX(-3px) translateY(39px) rotate(-13deg);
-o-transform: translateX(-3px) translateY(39px) rotate(-13deg);
transform: translateX(-3px) translateY(39px) rotate(-13deg);
-webkit-transition-delay: .04s;
-moz-transition-delay: .04s;
-o-transition-delay: .04s;
transition-delay: .04s;
}
And so on.
等等。
回答by Aravind
I came across this solution called: CircleType.js. It provides a short and simpler way to create circular texts.
我遇到了这个名为：CircleType.js 的解决方案。它提供了一种简短而简单的方法来创建循环文本。
<h2 id="yourStyle">MARC THOMAS.</h2>
$('#yourStyle').circleType({radius: 800});
Or you can use lettering.jswhich is quite flexible.
或者你可以使用非常灵活的lettering.js。
Add your transitions using CSS/jQuery on top of that. Hope this helps!
在此基础上使用 CSS/jQuery 添加您的过渡。希望这可以帮助！
