« Previous Demo: Sliding Image Panels with CSS3 Back to the Codrops Article

Arctext.js

Curving text with CSS3 & jQuery

Curve Direction No rotation Set/animate

Just ♦ bend ♦ your ♦ text

ABCDEFG

I wanna be curved

Example 1 - Curve

Curved with a radius of 300

$example1.arctext({radius: 300})

I wanna be different

Example 2 - Direction

Changed direction

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

I have straight letters

Example 3 - No rotation

Non-rotated letters

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

See me change

Example 4 - Set/animate

Set or animate

$example4.arctext({radius: 300})

Set meradius: 140,
dir: -1 Animate meradius: 300,
dir: -1,
animation: 300ms ease-out Animate meradius: 200,
dir: 1,
animation: 300ms Reset meradius: 300,
dir: 1


来源：codrops　代码整理：程序员设计师联盟淘宝店　感谢：西西

＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。

CSS3&jQuery制作的Arctext弧形文字效果，效果很赞，请使用Firefox或Chrome查看效果，程序员设计师联盟淘宝店推荐下载！