CSS3可以幫助我們旋轉(zhuǎn)字體，但是如果想讓一行字體產(chǎn)生弧度曲線的效果，稍微有點兒費勁。今天分享一個jQuery插件：Arctext.js ，可以有效的幫助我們生成一行帶有弧度的文字效果。它能夠自動計算正確的旋轉(zhuǎn)角度，并且生成對應(yīng)的CSS3。希望大家喜歡！

插件選項

radius：0

最小的值是文字長度，如果設(shè)置為-1，則顯示直線。

dir：1

1：向下彎曲

2：向上彎曲

rotate：true

如果為true，則每個字母都旋轉(zhuǎn)。

fitText：false

如果你想嘗試使用fitText插件，設(shè)置為true，記住包裝的標簽需要fluid布局。

Javascript代碼

function init() {

$headline.show().arctext({radius: 400});

$word1.show().arctext({radius: 148});

$word2.show().arctext({dir: -1});

$example1.show().arctext({radius: 300});

$example2.show().arctext({radius: 400, dir: -1});

$example3.show().arctext({radius: 500, rotate: false});

$example4.show().arctext({radius: 300});

$('#button_set').on('click', function() {

$example4.arctext('set', {

radius??: 140,

dir???: -1

});

return false;

});

$('#button_anim1').on('click', function() {

$example4.arctext('set', {

radius??: 300,

dir???: -1,

animation?: {

speed?: 300,

easing? : 'ease-out'

}

});

return false;

});

$('#button_anim2').on('click', function() {

$example4.arctext('set', {

radius??: 200,

dir???: 1,

animation?: {

speed?: 300

}

});

return false;

});

$('#button_reset').on('click', function() {

$example4.arctext('set', {

radius??: 300,

dir???: 1

});

return false;

});

};

總結(jié)

以上是生活随笔為你收集整理的js特效 在服务器显示变形,使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。