jQuery和css3简单的文字3d翻转和3d旋转动画特效

当前位置:主页 > jQuery库 > 文本和超链接 > jQuery和css3简单的文字3d翻转和3d旋转动画特效
jQuery和css3简单的文字3d翻转和3d旋转动画特效
分享:

    插件介绍

    这是一款简单的jQuery和css3文字3d翻转和3d旋转动画特效插件。该文字动画插件共有5种效果,分别是淡入淡出,3d水平翻转,3d垂直翻转,3d翻转和3d旋转效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-12-24
    阅读:

简要教程

这是一款非常简单jQuery和css3文字3d翻转和3d旋转动画特效插件。更好的效果你可以查看jQuery和css3文字3d翻转动画特效插件

你所要做的事情就是在html的头部中引入jQuery和jquery.simple-text-rotator.js以及simpletextrotator.css文件。然后将你想要翻转或旋转的文字包裹到span class=”rotate”的容器中。确保鸟包裹到<span>中的文本使用逗号(“,”)隔开。

HTML结构

注意下面的文本都使用逗号分隔开。

<span class="rotate">Simple, Customizable, Light Weight, Easy</span>
                

JAVASCRIPT

$(".rotate").textrotator({
    animation: "spin",
    separator: ",",
    speed: 2000
});
                

animation:你可以选择dissolve, flip, flipUp, flipCube, flipCubeUP, fade 和 spin动画效果。如果你不选择任何效果,那默认值为“dissolve”。这些效果组合通过CSS transform和jQuery来完成动画效果。其实要做3d翻转或3d旋转效果,CSS3是最好的选择。

flipsspins效果都是使用CSS3来完成的。对于淡入淡出效果,使用了jQuery的fadeInfadeOut效果。对于溶解(dissolve )效果,这里使用的是box-shadow来制作。

jquery和css3简单的文字动画效果

在文本分割符方面,开始的时候我们决定使用逗号来分割,但是如果文本中带有逗号,那就会发生冲突,所以,最终版本分割符可以由用户来决定,如果用户不设置分割符,那么就使用逗号作为分割符。

Speed参数非常简单,它决定文本旋转或翻转的速度,单位是ms。你可以在simpletextrotator.css文件中通过改变.rotating的值来调整所有动画的速度。