2017-07-23 67 views
2

我被這個代碼卡住了..我試圖將this文本動畫添加到wordpress頁面中的文本只有...任何想法?感謝大家。如何添加文字動畫到wordpress

<div class="container"> 
    <span class="txt anim-text-flow">How are you? Bacon ipsum dolor sit amet.</span> 
</div> 
+0

你可以發佈你的CSS和HTML和正在使用的任何JavaScript? – Andrew

+0

看起來CSS是不自然的CSS它的SCSS所以它可能無法適用於每個平臺 – JaTurna

+0

安德魯如果你點擊「這」我會去codepen鏈接控制檯,你會看到所有的代碼 –

回答

0

將這個元素在你的WordPress的帖子內容爲html

<span class="yourclassname anim-text-flow">How are you? Bacon ipsum dolor sit amet.</span> 
 
<script type="text/javascript"> 
 
    $('.yourclassname').html(function(i, html) { 
 
     var chars = $.trim(html).split(""); 
 
     return '<span>' + chars.join('</span><span>') + '</span>'; 
 
    }); 
 
<script>

+0

謝謝你的答案,我知道,但這不是我的問題... 我想知道我怎麼可以在wordpress頁面中添加此代碼..對於我有那裏的文本... –

+0

哦,我看到了,我會改變答案 – StefansArya

+0

然後我必須在wp content root中添加html/css/js文件?對不起,我有點新手這種東西.. –

1

我剛纔提取純CSS和JS從和codepen這裏添加。它正在工作。確保你在wordpress中正確地入選了這些CSS和JS。雖然我注意到你正在使用「視覺作曲家」,但是視覺作曲家插件可以選擇添加自定義css和js,你也可以使用它。

$('.txt').html(function(i, html) { 
 
    var chars = $.trim(html).split(""); 
 

 
    return '<span>' + chars.join('</span><span>') + '</span>'; 
 
}); 
 

 
 /* 
 
* Animation module with all animation code 
 
*/ 
 
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300); 
 
.anim-text-flow, 
 
.anim-text-flow-hover:hover { 
 
    /* 
 
    * Animation variables 
 
    */ 
 
    /* 
 
    * Elements settings 
 
    */ 
 
    /* 
 
    * Keyframe loop 
 
    */ 
 
    /* 
 
    * Element animation delay loop 
 
    */ 
 
} 
 
.anim-text-flow span, 
 
.anim-text-flow-hover:hover span { 
 
    -webkit-animation-name: anim-text-flow-keys; 
 
      animation-name: anim-text-flow-keys; 
 
    -webkit-animation-duration: 50s; 
 
      animation-duration: 50s; 
 
    -webkit-animation-iteration-count: infinite; 
 
      animation-iteration-count: infinite; 
 
    -webkit-animation-direction: alternate; 
 
      animation-direction: alternate; 
 
    -webkit-animation-fill-mode: forwards; 
 
      animation-fill-mode: forwards; 
 
} 
 
@-webkit-keyframes anim-text-flow-keys { 
 
    0% { 
 
    color: #5cd687; 
 
    } 
 
    5% { 
 
    color: #d6895c; 
 
    } 
 
    10% { 
 
    color: #d6875c; 
 
    } 
 
    15% { 
 
    color: #d6a15c; 
 
    } 
 
    20% { 
 
    color: #c2d65c; 
 
    } 
 
    25% { 
 
    color: #5cd6a3; 
 
    } 
 
    30% { 
 
    color: #d6625c; 
 
    } 
 
    35% { 
 
    color: #d2d65c; 
 
    } 
 
    40% { 
 
    color: #c2d65c; 
 
    } 
 
    45% { 
 
    color: #d69f5c; 
 
    } 
 
    50% { 
 
    color: #d66e5c; 
 
    } 
 
    55% { 
 
    color: #d6a15c; 
 
    } 
 
    60% { 
 
    color: #d65ca7; 
 
    } 
 
    65% { 
 
    color: #d65c64; 
 
    } 
 
    70% { 
 
    color: #5cd69f; 
 
    } 
 
    75% { 
 
    color: #89d65c; 
 
    } 
 
    80% { 
 
    color: #9f5cd6; 
 
    } 
 
    85% { 
 
    color: #7a5cd6; 
 
    } 
 
    90% { 
 
    color: #5cd672; 
 
    } 
 
    95% { 
 
    color: #785cd6; 
 
    } 
 
    100% { 
 
    color: #665cd6; 
 
    } 
 
} 
 
@keyframes anim-text-flow-keys { 
 
    0% { 
 
    color: #5cd687; 
 
    } 
 
    5% { 
 
    color: #d6895c; 
 
    } 
 
    10% { 
 
    color: #d6875c; 
 
    } 
 
    15% { 
 
    color: #d6a15c; 
 
    } 
 
    20% { 
 
    color: #c2d65c; 
 
    } 
 
    25% { 
 
    color: #5cd6a3; 
 
    } 
 
    30% { 
 
    color: #d6625c; 
 
    } 
 
    35% { 
 
    color: #d2d65c; 
 
    } 
 
    40% { 
 
    color: #c2d65c; 
 
    } 
 
    45% { 
 
    color: #d69f5c; 
 
    } 
 
    50% { 
 
    color: #d66e5c; 
 
    } 
 
    55% { 
 
    color: #d6a15c; 
 
    } 
 
    60% { 
 
    color: #d65ca7; 
 
    } 
 
    65% { 
 
    color: #d65c64; 
 
    } 
 
    70% { 
 
    color: #5cd69f; 
 
    } 
 
    75% { 
 
    color: #89d65c; 
 
    } 
 
    80% { 
 
    color: #9f5cd6; 
 
    } 
 
    85% { 
 
    color: #7a5cd6; 
 
    } 
 
    90% { 
 
    color: #5cd672; 
 
    } 
 
    95% { 
 
    color: #785cd6; 
 
    } 
 
    100% { 
 
    color: #665cd6; 
 
    } 
 
} 
 
.anim-text-flow span:nth-of-type(1), 
 
.anim-text-flow-hover:hover span:nth-of-type(1) { 
 
    -webkit-animation-delay: -19.8s; 
 
      animation-delay: -19.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(2), 
 
.anim-text-flow-hover:hover span:nth-of-type(2) { 
 
    -webkit-animation-delay: -19.6s; 
 
      animation-delay: -19.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(3), 
 
.anim-text-flow-hover:hover span:nth-of-type(3) { 
 
    -webkit-animation-delay: -19.4s; 
 
      animation-delay: -19.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(4), 
 
.anim-text-flow-hover:hover span:nth-of-type(4) { 
 
    -webkit-animation-delay: -19.2s; 
 
      animation-delay: -19.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(5), 
 
.anim-text-flow-hover:hover span:nth-of-type(5) { 
 
    -webkit-animation-delay: -19s; 
 
      animation-delay: -19s; 
 
} 
 
.anim-text-flow span:nth-of-type(6), 
 
.anim-text-flow-hover:hover span:nth-of-type(6) { 
 
    -webkit-animation-delay: -18.8s; 
 
      animation-delay: -18.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(7), 
 
.anim-text-flow-hover:hover span:nth-of-type(7) { 
 
    -webkit-animation-delay: -18.6s; 
 
      animation-delay: -18.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(8), 
 
.anim-text-flow-hover:hover span:nth-of-type(8) { 
 
    -webkit-animation-delay: -18.4s; 
 
      animation-delay: -18.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(9), 
 
.anim-text-flow-hover:hover span:nth-of-type(9) { 
 
    -webkit-animation-delay: -18.2s; 
 
      animation-delay: -18.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(10), 
 
.anim-text-flow-hover:hover span:nth-of-type(10) { 
 
    -webkit-animation-delay: -18s; 
 
      animation-delay: -18s; 
 
} 
 
.anim-text-flow span:nth-of-type(11), 
 
.anim-text-flow-hover:hover span:nth-of-type(11) { 
 
    -webkit-animation-delay: -17.8s; 
 
      animation-delay: -17.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(12), 
 
.anim-text-flow-hover:hover span:nth-of-type(12) { 
 
    -webkit-animation-delay: -17.6s; 
 
      animation-delay: -17.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(13), 
 
.anim-text-flow-hover:hover span:nth-of-type(13) { 
 
    -webkit-animation-delay: -17.4s; 
 
      animation-delay: -17.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(14), 
 
.anim-text-flow-hover:hover span:nth-of-type(14) { 
 
    -webkit-animation-delay: -17.2s; 
 
      animation-delay: -17.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(15), 
 
.anim-text-flow-hover:hover span:nth-of-type(15) { 
 
    -webkit-animation-delay: -17s; 
 
      animation-delay: -17s; 
 
} 
 
.anim-text-flow span:nth-of-type(16), 
 
.anim-text-flow-hover:hover span:nth-of-type(16) { 
 
    -webkit-animation-delay: -16.8s; 
 
      animation-delay: -16.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(17), 
 
.anim-text-flow-hover:hover span:nth-of-type(17) { 
 
    -webkit-animation-delay: -16.6s; 
 
      animation-delay: -16.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(18), 
 
.anim-text-flow-hover:hover span:nth-of-type(18) { 
 
    -webkit-animation-delay: -16.4s; 
 
      animation-delay: -16.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(19), 
 
.anim-text-flow-hover:hover span:nth-of-type(19) { 
 
    -webkit-animation-delay: -16.2s; 
 
      animation-delay: -16.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(20), 
 
.anim-text-flow-hover:hover span:nth-of-type(20) { 
 
    -webkit-animation-delay: -16s; 
 
      animation-delay: -16s; 
 
} 
 
.anim-text-flow span:nth-of-type(21), 
 
.anim-text-flow-hover:hover span:nth-of-type(21) { 
 
    -webkit-animation-delay: -15.8s; 
 
      animation-delay: -15.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(22), 
 
.anim-text-flow-hover:hover span:nth-of-type(22) { 
 
    -webkit-animation-delay: -15.6s; 
 
      animation-delay: -15.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(23), 
 
.anim-text-flow-hover:hover span:nth-of-type(23) { 
 
    -webkit-animation-delay: -15.4s; 
 
      animation-delay: -15.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(24), 
 
.anim-text-flow-hover:hover span:nth-of-type(24) { 
 
    -webkit-animation-delay: -15.2s; 
 
      animation-delay: -15.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(25), 
 
.anim-text-flow-hover:hover span:nth-of-type(25) { 
 
    -webkit-animation-delay: -15s; 
 
      animation-delay: -15s; 
 
} 
 
.anim-text-flow span:nth-of-type(26), 
 
.anim-text-flow-hover:hover span:nth-of-type(26) { 
 
    -webkit-animation-delay: -14.8s; 
 
      animation-delay: -14.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(27), 
 
.anim-text-flow-hover:hover span:nth-of-type(27) { 
 
    -webkit-animation-delay: -14.6s; 
 
      animation-delay: -14.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(28), 
 
.anim-text-flow-hover:hover span:nth-of-type(28) { 
 
    -webkit-animation-delay: -14.4s; 
 
      animation-delay: -14.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(29), 
 
.anim-text-flow-hover:hover span:nth-of-type(29) { 
 
    -webkit-animation-delay: -14.2s; 
 
      animation-delay: -14.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(30), 
 
.anim-text-flow-hover:hover span:nth-of-type(30) { 
 
    -webkit-animation-delay: -14s; 
 
      animation-delay: -14s; 
 
} 
 
.anim-text-flow span:nth-of-type(31), 
 
.anim-text-flow-hover:hover span:nth-of-type(31) { 
 
    -webkit-animation-delay: -13.8s; 
 
      animation-delay: -13.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(32), 
 
.anim-text-flow-hover:hover span:nth-of-type(32) { 
 
    -webkit-animation-delay: -13.6s; 
 
      animation-delay: -13.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(33), 
 
.anim-text-flow-hover:hover span:nth-of-type(33) { 
 
    -webkit-animation-delay: -13.4s; 
 
      animation-delay: -13.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(34), 
 
.anim-text-flow-hover:hover span:nth-of-type(34) { 
 
    -webkit-animation-delay: -13.2s; 
 
      animation-delay: -13.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(35), 
 
.anim-text-flow-hover:hover span:nth-of-type(35) { 
 
    -webkit-animation-delay: -13s; 
 
      animation-delay: -13s; 
 
} 
 
.anim-text-flow span:nth-of-type(36), 
 
.anim-text-flow-hover:hover span:nth-of-type(36) { 
 
    -webkit-animation-delay: -12.8s; 
 
      animation-delay: -12.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(37), 
 
.anim-text-flow-hover:hover span:nth-of-type(37) { 
 
    -webkit-animation-delay: -12.6s; 
 
      animation-delay: -12.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(38), 
 
.anim-text-flow-hover:hover span:nth-of-type(38) { 
 
    -webkit-animation-delay: -12.4s; 
 
      animation-delay: -12.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(39), 
 
.anim-text-flow-hover:hover span:nth-of-type(39) { 
 
    -webkit-animation-delay: -12.2s; 
 
      animation-delay: -12.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(40), 
 
.anim-text-flow-hover:hover span:nth-of-type(40) { 
 
    -webkit-animation-delay: -12s; 
 
      animation-delay: -12s; 
 
} 
 
.anim-text-flow span:nth-of-type(41), 
 
.anim-text-flow-hover:hover span:nth-of-type(41) { 
 
    -webkit-animation-delay: -11.8s; 
 
      animation-delay: -11.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(42), 
 
.anim-text-flow-hover:hover span:nth-of-type(42) { 
 
    -webkit-animation-delay: -11.6s; 
 
      animation-delay: -11.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(43), 
 
.anim-text-flow-hover:hover span:nth-of-type(43) { 
 
    -webkit-animation-delay: -11.4s; 
 
      animation-delay: -11.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(44), 
 
.anim-text-flow-hover:hover span:nth-of-type(44) { 
 
    -webkit-animation-delay: -11.2s; 
 
      animation-delay: -11.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(45), 
 
.anim-text-flow-hover:hover span:nth-of-type(45) { 
 
    -webkit-animation-delay: -11s; 
 
      animation-delay: -11s; 
 
} 
 
.anim-text-flow span:nth-of-type(46), 
 
.anim-text-flow-hover:hover span:nth-of-type(46) { 
 
    -webkit-animation-delay: -10.8s; 
 
      animation-delay: -10.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(47), 
 
.anim-text-flow-hover:hover span:nth-of-type(47) { 
 
    -webkit-animation-delay: -10.6s; 
 
      animation-delay: -10.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(48), 
 
.anim-text-flow-hover:hover span:nth-of-type(48) { 
 
    -webkit-animation-delay: -10.4s; 
 
      animation-delay: -10.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(49), 
 
.anim-text-flow-hover:hover span:nth-of-type(49) { 
 
    -webkit-animation-delay: -10.2s; 
 
      animation-delay: -10.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(50), 
 
.anim-text-flow-hover:hover span:nth-of-type(50) { 
 
    -webkit-animation-delay: -10s; 
 
      animation-delay: -10s; 
 
} 
 
.anim-text-flow span:nth-of-type(51), 
 
.anim-text-flow-hover:hover span:nth-of-type(51) { 
 
    -webkit-animation-delay: -9.8s; 
 
      animation-delay: -9.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(52), 
 
.anim-text-flow-hover:hover span:nth-of-type(52) { 
 
    -webkit-animation-delay: -9.6s; 
 
      animation-delay: -9.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(53), 
 
.anim-text-flow-hover:hover span:nth-of-type(53) { 
 
    -webkit-animation-delay: -9.4s; 
 
      animation-delay: -9.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(54), 
 
.anim-text-flow-hover:hover span:nth-of-type(54) { 
 
    -webkit-animation-delay: -9.2s; 
 
      animation-delay: -9.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(55), 
 
.anim-text-flow-hover:hover span:nth-of-type(55) { 
 
    -webkit-animation-delay: -9s; 
 
      animation-delay: -9s; 
 
} 
 
.anim-text-flow span:nth-of-type(56), 
 
.anim-text-flow-hover:hover span:nth-of-type(56) { 
 
    -webkit-animation-delay: -8.8s; 
 
      animation-delay: -8.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(57), 
 
.anim-text-flow-hover:hover span:nth-of-type(57) { 
 
    -webkit-animation-delay: -8.6s; 
 
      animation-delay: -8.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(58), 
 
.anim-text-flow-hover:hover span:nth-of-type(58) { 
 
    -webkit-animation-delay: -8.4s; 
 
      animation-delay: -8.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(59), 
 
.anim-text-flow-hover:hover span:nth-of-type(59) { 
 
    -webkit-animation-delay: -8.2s; 
 
      animation-delay: -8.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(60), 
 
.anim-text-flow-hover:hover span:nth-of-type(60) { 
 
    -webkit-animation-delay: -8s; 
 
      animation-delay: -8s; 
 
} 
 
.anim-text-flow span:nth-of-type(61), 
 
.anim-text-flow-hover:hover span:nth-of-type(61) { 
 
    -webkit-animation-delay: -7.8s; 
 
      animation-delay: -7.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(62), 
 
.anim-text-flow-hover:hover span:nth-of-type(62) { 
 
    -webkit-animation-delay: -7.6s; 
 
      animation-delay: -7.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(63), 
 
.anim-text-flow-hover:hover span:nth-of-type(63) { 
 
    -webkit-animation-delay: -7.4s; 
 
      animation-delay: -7.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(64), 
 
.anim-text-flow-hover:hover span:nth-of-type(64) { 
 
    -webkit-animation-delay: -7.2s; 
 
      animation-delay: -7.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(65), 
 
.anim-text-flow-hover:hover span:nth-of-type(65) { 
 
    -webkit-animation-delay: -7s; 
 
      animation-delay: -7s; 
 
} 
 
.anim-text-flow span:nth-of-type(66), 
 
.anim-text-flow-hover:hover span:nth-of-type(66) { 
 
    -webkit-animation-delay: -6.8s; 
 
      animation-delay: -6.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(67), 
 
.anim-text-flow-hover:hover span:nth-of-type(67) { 
 
    -webkit-animation-delay: -6.6s; 
 
      animation-delay: -6.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(68), 
 
.anim-text-flow-hover:hover span:nth-of-type(68) { 
 
    -webkit-animation-delay: -6.4s; 
 
      animation-delay: -6.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(69), 
 
.anim-text-flow-hover:hover span:nth-of-type(69) { 
 
    -webkit-animation-delay: -6.2s; 
 
      animation-delay: -6.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(70), 
 
.anim-text-flow-hover:hover span:nth-of-type(70) { 
 
    -webkit-animation-delay: -6s; 
 
      animation-delay: -6s; 
 
} 
 
.anim-text-flow span:nth-of-type(71), 
 
.anim-text-flow-hover:hover span:nth-of-type(71) { 
 
    -webkit-animation-delay: -5.8s; 
 
      animation-delay: -5.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(72), 
 
.anim-text-flow-hover:hover span:nth-of-type(72) { 
 
    -webkit-animation-delay: -5.6s; 
 
      animation-delay: -5.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(73), 
 
.anim-text-flow-hover:hover span:nth-of-type(73) { 
 
    -webkit-animation-delay: -5.4s; 
 
      animation-delay: -5.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(74), 
 
.anim-text-flow-hover:hover span:nth-of-type(74) { 
 
    -webkit-animation-delay: -5.2s; 
 
      animation-delay: -5.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(75), 
 
.anim-text-flow-hover:hover span:nth-of-type(75) { 
 
    -webkit-animation-delay: -5s; 
 
      animation-delay: -5s; 
 
} 
 
.anim-text-flow span:nth-of-type(76), 
 
.anim-text-flow-hover:hover span:nth-of-type(76) { 
 
    -webkit-animation-delay: -4.8s; 
 
      animation-delay: -4.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(77), 
 
.anim-text-flow-hover:hover span:nth-of-type(77) { 
 
    -webkit-animation-delay: -4.6s; 
 
      animation-delay: -4.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(78), 
 
.anim-text-flow-hover:hover span:nth-of-type(78) { 
 
    -webkit-animation-delay: -4.4s; 
 
      animation-delay: -4.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(79), 
 
.anim-text-flow-hover:hover span:nth-of-type(79) { 
 
    -webkit-animation-delay: -4.2s; 
 
      animation-delay: -4.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(80), 
 
.anim-text-flow-hover:hover span:nth-of-type(80) { 
 
    -webkit-animation-delay: -4s; 
 
      animation-delay: -4s; 
 
} 
 
.anim-text-flow span:nth-of-type(81), 
 
.anim-text-flow-hover:hover span:nth-of-type(81) { 
 
    -webkit-animation-delay: -3.8s; 
 
      animation-delay: -3.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(82), 
 
.anim-text-flow-hover:hover span:nth-of-type(82) { 
 
    -webkit-animation-delay: -3.6s; 
 
      animation-delay: -3.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(83), 
 
.anim-text-flow-hover:hover span:nth-of-type(83) { 
 
    -webkit-animation-delay: -3.4s; 
 
      animation-delay: -3.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(84), 
 
.anim-text-flow-hover:hover span:nth-of-type(84) { 
 
    -webkit-animation-delay: -3.2s; 
 
      animation-delay: -3.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(85), 
 
.anim-text-flow-hover:hover span:nth-of-type(85) { 
 
    -webkit-animation-delay: -3s; 
 
      animation-delay: -3s; 
 
} 
 
.anim-text-flow span:nth-of-type(86), 
 
.anim-text-flow-hover:hover span:nth-of-type(86) { 
 
    -webkit-animation-delay: -2.8s; 
 
      animation-delay: -2.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(87), 
 
.anim-text-flow-hover:hover span:nth-of-type(87) { 
 
    -webkit-animation-delay: -2.6s; 
 
      animation-delay: -2.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(88), 
 
.anim-text-flow-hover:hover span:nth-of-type(88) { 
 
    -webkit-animation-delay: -2.4s; 
 
      animation-delay: -2.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(89), 
 
.anim-text-flow-hover:hover span:nth-of-type(89) { 
 
    -webkit-animation-delay: -2.2s; 
 
      animation-delay: -2.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(90), 
 
.anim-text-flow-hover:hover span:nth-of-type(90) { 
 
    -webkit-animation-delay: -2s; 
 
      animation-delay: -2s; 
 
} 
 
.anim-text-flow span:nth-of-type(91), 
 
.anim-text-flow-hover:hover span:nth-of-type(91) { 
 
    -webkit-animation-delay: -1.8s; 
 
      animation-delay: -1.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(92), 
 
.anim-text-flow-hover:hover span:nth-of-type(92) { 
 
    -webkit-animation-delay: -1.6s; 
 
      animation-delay: -1.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(93), 
 
.anim-text-flow-hover:hover span:nth-of-type(93) { 
 
    -webkit-animation-delay: -1.4s; 
 
      animation-delay: -1.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(94), 
 
.anim-text-flow-hover:hover span:nth-of-type(94) { 
 
    -webkit-animation-delay: -1.2s; 
 
      animation-delay: -1.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(95), 
 
.anim-text-flow-hover:hover span:nth-of-type(95) { 
 
    -webkit-animation-delay: -1s; 
 
      animation-delay: -1s; 
 
} 
 
.anim-text-flow span:nth-of-type(96), 
 
.anim-text-flow-hover:hover span:nth-of-type(96) { 
 
    -webkit-animation-delay: -0.8s; 
 
      animation-delay: -0.8s; 
 
} 
 
.anim-text-flow span:nth-of-type(97), 
 
.anim-text-flow-hover:hover span:nth-of-type(97) { 
 
    -webkit-animation-delay: -0.6s; 
 
      animation-delay: -0.6s; 
 
} 
 
.anim-text-flow span:nth-of-type(98), 
 
.anim-text-flow-hover:hover span:nth-of-type(98) { 
 
    -webkit-animation-delay: -0.4s; 
 
      animation-delay: -0.4s; 
 
} 
 
.anim-text-flow span:nth-of-type(99), 
 
.anim-text-flow-hover:hover span:nth-of-type(99) { 
 
    -webkit-animation-delay: -0.2s; 
 
      animation-delay: -0.2s; 
 
} 
 
.anim-text-flow span:nth-of-type(100), 
 
.anim-text-flow-hover:hover span:nth-of-type(100) { 
 
    -webkit-animation-delay: 0s; 
 
      animation-delay: 0s; 
 
} 
 

 
body { 
 
    background-color: #1a1a1a; 
 
    color: #fefefe; 
 
    font-family: 'Ubuntu'; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.2em; 
 
    font-size: 1.3em; 
 
    line-height: 2; 
 
    font-weight: 300; 
 
    text-rendering: optimizeLegibility; 
 
    text-align: center; 
 
} 
 

 
.container { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 100%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
      transform: translate(-50%, -50%); 
 
} 
 

 
.txt { 
 
    display: block; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    position: absolute; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    text-align: right; 
 
    color: #eee; 
 
    font-size: 15px; 
 
    line-height: 15px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <span class="txt anim-text-flow">How are you? Bacon ipsum dolor sit amet.</span> 
 
</div>

+0

非常感謝Tamin!有效!!!我在div class之前錯過了!再次感謝 –

+0

嗨Tamim,我剛剛意識到,與您的代碼與這,我與wordpress中已安裝的插件有衝突......我如何解決衝突?謝謝 –