使用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的彎曲文本

回答

相關問題