使用 HTML 和 CSS 的曲線文本

Question

我知道已經有一篇關於彎曲文本的帖子，但我正在尋找特定的內容。

在這個網頁 ( 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>

Answer 1

我遇到了這個名為： CircleType.js 的解決方案。 它提供了一種簡短而簡單的方法來創建循環文本。

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

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

或者你可以使用非常靈活的lettering.js 。

在此基礎上使用 CSS/jQuery 添加您的過渡。 希望這可以幫助！

Answer 2

他對每個字母使用 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;
}

等等。

使用 HTML 和 CSS 的曲線文本

問題描述

2 個解決方案

解決方案1
16 2014-11-20 05:52:02

解決方案2
12 已采納 2013-02-20 21:34:49

使用 HTML 和 CSS 的曲線文本

問題描述

2 個解決方案

解決方案1 16 2014-11-20 05:52:02

解決方案2 12 已采納 2013-02-20 21:34:49

解決方案1
16 2014-11-20 05:52:02

解決方案2
12 已采納 2013-02-20 21:34:49