文本/链接
文字翻转动画特效jQuery插件
PetitQ
这是一款 jQuery 文字翻转动画特效插件，该插件通过 jquery 动态为文字添加 CSS3 属性来实现文字的翻转动画效果，并提供一些配置参数和回调函数来控制文字动画的效果。
使用方法
在页面中引入 html2canvas.js 文件。
也想出现在这里？联系我们吧
<script src="jquery.min.js"></script>
<script src="textyleF.min.js"></script>
初始化插件
$('target').textyleF();
CSS 样式
/* 目标元素 */opacity: 0;
perspective: xxx; //3d effective dose
/* 翻转动画*/transform : rotateY(xxxdeg); //you can also use 'rotateX' together.
(transform-origin : xxx;) //If you want.
/* 淡入淡出动画 */opacity: 0;
示例 1：
target {
opacity: 0;
perspective : 200px;
}target span {
/* flip effect */transform : rotateY(-90deg);
/* fade effect */opacity: 0;
}
示例 2：
target {
opacity: 0;
perspective : 200px;
}target span {
/* flip effect */transform : rotateY(-90deg) rotateX(45deg);
transform-origin : -50% 75%;
/* fade effect */opacity: 0;
}
配置参数
$('target').textyleF({
duration : 1000,
delay : 150,
easing : 'ease',
callback : null
});
示例：
$('target').textyleF({
duration : 2000,
delay : 200,
easing : 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
callback : function(){
$(this).css({
color : '#fff',
transition : '1s',
});
$('.desc').css('opacity',1);
}});
Github 网址：https://github.com/mycreatesite/TextyleFLIP.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
