使用HTML&CSS的弯曲文本
问题描述:
我知道已经有一篇关于弯曲文本的文章,但我正在寻找特定的东西。使用HTML&CSS的弯曲文本
在这个网页(http://mrcthms.com/)马克用一种很好的技术为他的名字曲线文字,但我无法为我的生活制定出如何复制这项技术。这是我想要的:
<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>
答
他在每个字母上使用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>
而反过来,在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;
}
等。
答
我遇到了一个名为:CircleType.js的解决方案。它很好,很容易创建一个圆形文本。作为
<h2 id="yourStyle">MARC THOMAS.</h2>
$('#yourStyle').circleType({radius: 800});
一样简单或者您可以使用lettering.js长句拆分成字母,如果你喜欢手动工作。
像往常一样使用CSS或jquery添加转场。希望这可以帮助!
当然......跨度:第n个孩子(1)仅指第一个字符......我有时候是个白痴!谢谢! – 2013-02-20 21:42:12
没问题,另一个大脑总是有帮助!随意接受;) – BenM 2013-02-20 21:47:12