首页

关于

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

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

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

在线演示  本地下载

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

插件选项

  • radius:0
最小的值是文字长度,如果设置为-1,则显示直线
  • dir: 1

1:向下弯曲
2:向上弯曲

  • rotate: true
如果为true,则每个字母都旋转
  • fitText:false
如果你想尝试使用fitText插件,设置为true,记住包装的标签需要fluid布局

Javascript代码

function init() {

$headline.show().arctext({radius: 400});

$word1.show().arctext({radius:…

标签: 文字特效, 文字弯曲, 文字旋转, CSS文字特效, CSS3文字旋转, arc, letters, words, rotate, warp, circle, curve, along, path, jquery, css3, transform

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

日期:2011/12/20  来源:GBin1.com

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.