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

日期：2012/01/26  来源：GBin1.com

在线演示 本地下载

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

 

Js代码

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