日期:2014-05-16 浏览次数:20374 次
日期:2012/01/26? 来源:GBin1.com
在线演示 ? 本地下载
CSS3可以帮助我们旋转字体,但是如果想让一行字体产生弧度曲线的效果,稍微有点儿费劲。今天分享一个jQuery插件:Arctext.js , 可以有效的帮助我们生成一行带有弧度的文字效果。它能够自动计算正确的旋转角度,并且生成对应的CSS3。希望大家喜欢!
?
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