Arctext.js 使用 jQuery 和 CSS3 弯曲旋转文字

Question

虽然 CSS3 里面有旋转的相关属性，但是基本都是整个块一起旋转，如果我们要实现弯曲的文本，单单用 CSS3 就无法完成了，Arctext.js 是一个 jQuery 插件，基于 Lettering.js 插件，能够准确控制一段文字中的每一个字符，给他们设置一个递增/递减的幅度，就可以实现一个弯曲的文本。

可选参数

radius    : 0,     
// the minimum value allowed is 
// half of the word length. 
// if set to -1, the word will be straight.

dir        : 1,    
// 1: curve is down, 
// -1: curve is up

rotate    : true,    
// if true each letter should be rotated.

fitText    : false 
// if you want to try out the 
// fitText plugin (http://fittextjs.com/) 
// set this to true. 
// Don't forget, the wrapper should be fluid.

使用方法

首先我们需要引入插件文件，也就是 jQuery 和 Arctext.js 插件的文件

<script src="jquery.min.js"></script>
<script src="jquery.arctext.js"></script>

在页面加载完成以后调用插件

$(function(){
    $('.txt').arctext({radius: 300});
})

里面可选的参数你可以参加上面的代码，可以设置段落弯曲弧度、弯曲的方向等。

方法函数

如果你已经设置了弯曲的文本，但是你现在又想改一下特效，那么你可以使用下面的方法

$(function(){
    mytxt = $('.txt')
    
    //初始化
    mytxt.arctext({radius: 300});
    
    //修改效果
    mytxt.arctext('set', {
        radius        : 200, 
        dir            : 1, 
        animation    : {
            speed    : 300
        }
    })
})

中间的切换是有动画的，非常的好看，可以点击这里看看效果：https://tympanus.net/Development/Arctext/