使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js

在线演示

CSS3可以帮助我们旋转字体，但是如果想让一行字体产生弧度曲线的效果，稍微有点儿费劲。今天分享一个jQuery插件：Arctext.js ，可以有效的帮助我们生成一行带有弧度的文字效果。它能够自动计算正确的旋转角度，并且生成对应的CSS3。希望大家喜欢！

插件选项

radius：0

最小的值是文字长度，如果设置为-1，则显示直线。

dir：1

1：向下弯曲

2：向上弯曲

rotate：true

如果为true，则每个字母都旋转。

fitText：false

如果你想尝试使用fitText插件，设置为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;
});
};

来源：分享一个使一行文字变形产生弯曲弧度特效的jQuery插件 - Arctext.js