当前位置：首页 > 网页特效 > 文字效果

jQuery文字翻转动画特效插件

分类：文字效果日期：2024-05-14 点击(5) 评论(0)

jQuery文字翻转动画特效插件

简介

在页面中引入html2canvas.js文件。
```html
<script src="jquery.min.js"></script>
<script src="textyleF.min.js"></script>
```
#####  初始化插件
```html
$('target').textyleF();
```
#####  CSS样式
```html
/* 目标元素 */
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：

```html
target {
  opacity: 0;
  perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg);
  /* fade effect */
  opacity: 0;
}
```
示例2：

```html
target {
  opacity: 0;
    perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg) rotateX(45deg);
  transform-origin : -50% 75%;
  /* fade effect */
  opacity: 0;
}
```
#####  配置参数
```html
$('target').textyleF({
  duration : 1000,
  delay : 150,
  easing : 'ease',
  callback : null
});
```
示例：

```html
$('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);
  }
});
```

web299.com

jQuery文字翻转动画特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果