0

JS小提琴

我使用第三方插件显示带有动画的文本，现在动画完成后我的 html 看起来像这样

<div data-cj-randomize="false" data-cj-loop="false" class="cj-fx cj-fx-text-link" id="effect-1" style="font-size: 32px; color: rgb(34, 34, 34); width: 850px;"><a class="cj-fx-spacer">&nbsp;</a>
    <a data-cj-scale-y-end="1" data-cj-scale-y-start="0" data-cj-rotate-x-end="0" data-cj-rotate-x-start="90" data-cj-buffer-y="70" data-cj-buffer-x="70" data-cj-animate-opacity="true" data-cj-easing="Circ.easeInOut" data-cj-duration="5000" data-cj-animation-delay="0" data-cj-start-delay="0" data-cj-animate-by-word="false" data-cj-sequence="forward" data-cj-direction="in" data-cj-type="flyTopCenter" class="cj-fx-text" target="_blank" href="#" style="">
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 0px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">T</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 31px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">h</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 55px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">e</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 77px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">m</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 114px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">e</span>
        <span style="position: static; left: 136px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 149px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">f</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 164px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">o</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 190px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">r</span>
        <span style="position: static; left: 207px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 220px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">O</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 256px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">p</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 281px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">e</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 303px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">n</span>
        <span style="position: static; left: 327px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 340px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">C</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 373px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">l</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 385px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">a</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 407px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">s</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 426px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">s</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 445px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">r</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 462px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">o</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 488px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">o</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 514px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">m</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 551px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">s</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 570px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">&ndash;</span>
        <span style="position: static; left: 595px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 608px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">T</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 639px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">O</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 675px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">I</span>
        <span style="position: static; left: 692px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 705px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">M</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 749px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">a</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 771px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">r</span>
        <span style="position: static; left: 788px;">&nbsp;</span>
        <span style="visibility: visible; transition-property: opacity, left, top, -moz-transform; transition-duration: 5s; transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); opacity: 1; left: 801px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">1</span>
        <span style="visibility: visible; opacity: 1; left: 826px; top: 0px; transform: rotateX(0deg) scaleY(1); position: static;" class=" cj-tween">3</span>
    </a>
</div>

我需要使用 jquery 将文本设置在中心

4

3 回答 3

2

更改 CSS

.cj-fx-text {
    text-align:center;
    width:100%;
    left: 0;
    perspective: 1000px;
    position: absolute;
    top: 0;
    transform-style: preserve-3d;
    visibility: hidden;
}

在这里提琴

于 2013-09-11T12:58:26.747 回答
2

如果你摆脱这个

<a class="cj-fx-spacer">&nbsp;</a>

并将 .cj-fx-text 更改为：

.cj-fx-text {
    perspective: 1000px;
    position: absolute;
    display: block;
    transform-style: preserve-3d;
    visibility: hidden;
    text-align: center;
}

http://jsfiddle.net/ewJ4L/1/

这是你想要的吗？

于 2013-09-11T12:50:05.083 回答
2

要将最终文本行居中，您需要具有以下 CSS 规则：

#effect-1 {
    text-align: center; /* add this */
}

.cj-fx-text {
    position: absolute; /* remove this */
    top: 0; /* remove this */
    left: 0; /* remove this */
}

这可以使用 jQuery.css()方法来实现。

于 2013-09-11T12:59:51.017 回答