|
|
|
|
|
用純CSS實(shí)現(xiàn)環(huán)形文字效果,相比用CSS實(shí)現(xiàn)其他文字效果要復(fù)雜一些,本文介紹如何用純CSS實(shí)現(xiàn)環(huán)形文字效果。
純CSS實(shí)現(xiàn)環(huán)形文字效果
本文介紹的方法中,需要用到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">這是一個(gè)環(huán)形文字效果</textPath>
</text>
</svg>
代碼解釋
1、上面SVG代碼,實(shí)現(xiàn)的環(huán)形文字,添加了文字轉(zhuǎn)動(dòng)的動(dòng)畫(huà)效果。如果不要文字轉(zhuǎn)動(dòng),則可以把如下SVG代碼去掉。
<animateTransform
attributeName="transform"
begin="0s"
dur="30s"
type="rotate"
from="0 250 250"
to="360 250 250"
repeatCount="indefinite"
/>
2、此實(shí)例中,環(huán)形文字內(nèi)容添加了一個(gè)圖案,如果不要圖案,那么可以把如下SVG代碼去掉。
<symbol>
<rect x="225" y="135" width="50" height="230" id="redstripe"/>
</symbol>
3、此環(huán)形文字是平均分布于一個(gè)圓周上,當(dāng)文字個(gè)數(shù)減少時(shí),文字間隔就寬一些。
4、可通過(guò)CSS代碼里的 text
設(shè)置文字的顏色、大小等屬性。