jQuery和css3文字3D翻转动画特效插件

PetitQ 文本/链接 2018-11-09 2.14K 0 0

这是一款效果非常炫酷的 jQuery 和 css3 文字翻转动画特效插件。CSS3 为开发者们提供了许多非常有用的动画效果，使网页不再枯燥无味。在这个插件中，通过使用 Adjector.js 和 css3 使文字不断的做 3d 翻转和旋转动画，效果非常有趣。这里还有一个简单版的 jQuery 文字动画特效-jQuery 和 css3 简单的文字 3d 翻转和 3d 旋转动画特效。

HTML 结构：

Adjector.js 是十分简单的 jQuery 插件，你可以非常容易的集成它到你的项目中。

也想出现在这里？联系我们吧

```
<h1 class=“contain”>
```
```
    <span class="adject">Im</span> 
```

    <span class=“adject">Robo | Geek | Cool | Lazy | Nerd</span>

```
</h1>
```

上面是第 1-3 个 demo 的 html 结构。

```
<div id="sub" class=“contain">
```
```
    <span class=“adject”>
```
```
        [ Paragraph 1 ]
```
```
                    |  
```
```
                [ Paragraph 1 ]
```
```
                    | 
```

                [ Paragraph 1 ]

```
            | 
```

                [ Paragraph 1 ]

```
            | 
```
```
                [ Paragraph 1 ]
```
```
    </span>
```
```
</div>
```

上面是第 4 个 demo 的 html 结构

几个例子的 Html 结构除了将[h1]换位[div]之外没有什么不同。在第 4 个例子中使用[div]是为了使用 CSS 来渲染它。在所有的例子中，通用的 class 都是 contain 和 adject。

contain：它是作为 3d 翻转或旋转的容器

adject：这个 class 中包含的元素是被翻转或旋转的内容元素。内容默认使用过“|”符号分割，但是可以通过 jQuery 来改变这个分割符号

JAVASCRIPT 代码：

```
<script type="text/javascript">
```
```
    $(document).ready(function(){
```

            $(".contain .adject").adjector({

```
                    arm: 0
```
```
            });
```
```
    });
```
```
</script>
```

上面是 demo1 的 js 文件。

```
<script type="text/javascript">
```
```
    $(document).ready(function(){
```

            $(".contain .adject").adjector({

```
                    arm: 0
```
```
            });
```
```
    });
```
```
</script>
```

上面是 demo2 的 js 文件。

```
<script type="text/javascript">
```
```
    $(document).ready(function(){
```

            $(".contain .adject").adjector({

```
                    sep: "|",
```
```
                    stay: 1000,
```
```
                    trans: 800,
```
```
                    arm: -150
```
```
            });
```
```
    });
```
```
</script>
```

上面是 demo3 的 js 文件，上面的 js 文件必须在 html 头部引入 jQuery 和 adjector.js 文件后踩能使用。上面的 js 文件将调用 adjector 函数，并告诉它容器是.contain，翻转的目标是.adject，并提供 input 的值，如果 input 的值没有指定，那么插件将使用一个默认值，如 demo1 那样。你要确保提供了正确的.contain 和.adject 值。下面列出了一些可用的 jQuery 参数：

sep ：该参数是用于分割文本和文本块的分割符。默认值值“|”，但是你可以像 demo3 那样更改它

stay ：该参数是文本在屏幕上的停留时间，单位为 ms。对于单个文本，如 demo1-demo3，该参数适用了较短的时间值，在 demo4 中的文本块，适用了 3000ms 的数值

trans ：该参数是翻转或旋转的时间，单位是 ms

arm ：该参数是翻转或旋转的圆的半径如果 arm 设置为 0，那么文本将绕圆心旋转。如果设置为整数，那么文本将从左向右旋转，如果设置为负数，那么文本将从右向左旋转。数值的大小决定它们位移的大小，你可以多试几个数值来看看效果。

CSS 样式:

大部分的 CSS 样式时根据 js 文件的输入值来确定样式。

```
/* ====================================
```
```
 * adjector.css
```

 * ====================================

```
 * http://robo.im
```
```
 *
```

 * ================================= */

```
.adjecting {
```
```
  display: inline-block;
```
```
  position: relative;
```
```
  -webkit-transform-style: preserve-3d;
```
```
  -moz-transform-style: preserve-3d;
```
```
  -ms-transform-style: preserve-3d;
```
```
  -o-transform-style: preserve-3d;
```
```
  transform-style: preserve-3d;
```
```
  -webkit-transform-origin-x: 50%;
```
```
}
```
```
 
```

.adjecting .front-face, .adjecting .back-face {

```
  display: inline-block;
```
```
  -webkit-backface-visibility: hidden;
```
```
  -moz-backface-visibility: hidden;
```
```
  -ms-backface-visibility: hidden;
```
```
  -o-backface-visibility: hidden;
```
```
  backface-visibility: hidden;
```
```
}
```
```
 
```
```
.adjecting .front-face {
```
```
  position: absolute;
```
```
}
```
```
 
```
```
.adjecting .back-face {
```
```
  position: relative;
```
```
}
```
```
 
```

/* ======================================================

 * CSS for Demo pages only - Not required with the plugin

 * =================================================== */

```
#robo-wrapper {
```
```
  display: inline-block;
```
```
  width: 100%;
```
```
  text-align: center;
```
```
}
```
```
 
```
```
#robo-wrapper h1 {
```
```
  font-family: 'Raleway', sans-serif;
```
```
  font-size: 100px;
```
```
  font-weight: 900;
```
```
  text-transform: uppercase;
```
```
}
```
```
 
```
```
#robo-wrapper #option-details {
```
```
  display: inline-block;
```
```
  font-size: 18px;
```
```
  padding: 2px 7px;
```
```
  margin-bottom: 20px;
```

  background: rgba(255, 255, 255, 0.08);

```
  font-family: monospace;
```
```
  border-left: 3px solid #fff;
```
```
  border-right: 3px solid #fff;
```
```
}
```
```
 
```
```
.paragraph-content #heading {
```
```
  width: 400px;
```
```
  height: 70px;
```
```
  margin: 0 auto;
```
```
  font-family: 'Raleway', sans-serif;
```
```
  font-size: 60px;
```
```
  font-weight: 900;
```
```
  text-align: center;
```
```
}
```
```
 
```
```
.paragraph-content #sub {
```
```
  width: 400px;
```
```
  height: 300px;
```
```
  margin: 0 auto;
```
```
  font-size: 20px;
```
```
  text-align: justify;
```
```
}
```

jQuery 和 css3 文字 3D 翻转动画特效插件

已有 535 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

文本/链接

jQuery和css3文字3D翻转动画特效插件

HTML 结构：

JAVASCRIPT 代码：

CSS 样式:

jQuery 和 css3 文字 3D 翻转动画特效插件

相关文章

CSS3荧光灯文字闪烁动画特效

jQuery文字动画特效插件

纯CSS3鼠标滑过特效动画库

发表回复取消回复

热销模板

文本/链接

HTML 结构：

JAVASCRIPT 代码：

CSS 样式:

jQuery 和 css3 文字 3D 翻转动画特效插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复