卡卡網(wǎng)

用純CSS實現(xiàn)環(huán)形文字效果，相比用CSS實現(xiàn)其他文字效果要復雜一些，本文介紹如何用純CSS實現(xiàn)環(huán)形文字效果。

純CSS實現(xiàn)環(huán)形文字效果

demodownload

本文介紹的方法中，需要用到SVG技術(shù)。

CSS代碼

body {
  margin: 0;
  background: #000;
  text-align: center;
}

svg {
  width: 33%;
}

rect {
  fill: #FE0304;
}

text {
  font-size: 63px;
  font-family: FranklinGothic-Heavy, Frankin Gothic, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 21px;
  fill: white;
}

HTML代碼

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
<defs>
<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="textcircle">
<animateTransform
            attributeName="transform"
            begin="0s"
            dur="30s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
/>
</path>
<symbol>
    <rect x="225" y="135" width="50" height="230" id="redstripe"/>
</symbol>
</defs>
<use xlink:href="#redstripe" />
<use xlink:href="#redstripe" transform="rotate(90 250 250)" />
<use xlink:href="#redstripe" transform="rotate(45 250 250)" />
<use xlink:href="#redstripe" transform="rotate(-45 250 250)" />
<text dy="70" textLength="1220">
        <textPath xlink:href="#textcircle">這是一個環(huán)形文字效果</textPath>
</text>
</svg>

execcodegetcode

代碼解釋

1、上面SVG代碼，實現(xiàn)的環(huán)形文字，添加了文字轉(zhuǎn)動的動畫效果。如果不要文字轉(zhuǎn)動，則可以把如下SVG代碼去掉。

<animateTransform
    attributeName="transform"
    begin="0s"
    dur="30s"
    type="rotate"
    from="0 250 250"
    to="360 250 250"
    repeatCount="indefinite" 
/>

2、此實例中，環(huán)形文字內(nèi)容添加了一個圖案，如果不要圖案，那么可以把如下SVG代碼去掉。

<symbol>
    <rect x="225" y="135" width="50" height="230" id="redstripe"/>
</symbol>

3、此環(huán)形文字是平均分布于一個圓周上，當文字個數(shù)減少時，文字間隔就寬一些。

4、可通過CSS代碼里的 text 設置文字的顏色、大小等屬性。

您可能對以下文章也感興趣

• css輕松實現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果

標簽: 環(huán)形文字效果  css  css3  SVG