« 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


代码整理：时代Java - NowJava.com　

注：此代码仅供学习交流，请勿用于商业用途。

CSS3&jQuery制作的Arctext弧形文字效果，效果很赞，请使用Firefox或Chrome查看效果，时代Java - NowJava.com推荐下载！

下载代码说明
X关闭

Arctext弧形文字效果插件（CSS3&jQuery）

CSS3&jQuery制作的Arctext弧形文字效果，效果很赞，请使用Firefox或Chrome查看效果，推荐下载！