技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營(yíng)

贊助商

分類目錄

贊助商

最新文章

搜索

CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡(jiǎn)單實(shí)例】

作者:admin    時(shí)間:2021-7-22 18:3:17    瀏覽:

這篇文章主要是通過簡(jiǎn)單的實(shí)例,介紹如何使用CSS+SVG實(shí)現(xiàn)環(huán)形或圓形文字效果。

demodownload

CSS代碼

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

.circlar path{ 
    fill: none; 
}
.circlar{
    width: 300px;
    height: 300px;
    margin: 100px;
}
.circlar svg{
    display: block;
    overflow: visible;
}

HTML代碼

<div class="circlar">
<svg viewBox="0 0 100 100">
         <path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>
         <text>
             <textPath xlink:href="#circle">
                這是一個(gè)環(huán)形文字效果
             </textPath>
         </text>
</svg>
</div>

execcodegetcode

代碼解釋

這里應(yīng)用了svg路徑實(shí)現(xiàn),創(chuàng)建一個(gè)圓形的路徑,再寫入文本,通過xlink:href屬性把它鏈到我們的圓上,設(shè)置圓形填充為none,svg標(biāo)簽overflowvisible

此代碼可實(shí)現(xiàn)環(huán)形文字和圓環(huán)文字的效果,環(huán)形文字從正上方開始,當(dāng)文字較少時(shí),便是非閉環(huán)形效果,當(dāng)文字可以布滿圓周時(shí),便是閉環(huán)形效果。

如果你想不管文字多少都是閉環(huán)形效果(文字任何時(shí)候都布滿圓周,文字少時(shí)字體之間間隔遠(yuǎn),文字多時(shí)字體之間間隔近),那么可以看看這個(gè)案例,純CSS實(shí)現(xiàn)環(huán)形文字效果

x
  • 站長(zhǎng)推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */