使用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>

来源

2013-02-20 Fifer Sheep

他在每个字母上使用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; 
}

等。

来源

2013-02-20 21:34:49 BenM

当然......跨度：第n个孩子（1）仅指第一个字符......我有时候是个白痴！谢谢！ – 2013-02-20 21:42:12

没问题，另一个大脑总是有帮助！随意接受;） – BenM 2013-02-20 21:47:12

我遇到了一个名为：CircleType.js的解决方案。它很好，很容易创建一个圆形文本。作为

<h2 id="yourStyle">MARC THOMAS.</h2> 

$('#yourStyle').circleType({radius: 800});

一样简单或者您可以使用lettering.js长句拆分成字母，如果你喜欢手动工作。

像往常一样使用CSS或jquery添加转场。希望这可以帮助！

来源

2014-11-20 05:52:02 Aravind

使用HTML＆CSS的弯曲文本

回答

相关问题