jquery - 如何将元素添加到基于 CSS 的文本旋转器(类似于新闻自动收报机)

Question

我正在尝试实现 CCS 文本旋转器(不是以一定 Angular ，而是像在一组文本中旋转)。

我正在使用 http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/并尝试了其他几个。

问题是我无法理解如何向代码添加更多元素。当我添加另一行时，它会覆盖第一行……因为数字是硬编码的。请帮忙。

我在 http://jsfiddle.net/wc6o9x6d/ 有一把 fiddle

在 fiddle 中你可以看到 - 当我在最后添加“Hello”时 - 它循环然后覆盖第一个单词“Spice”

CSS代码

body{
    background: #fff url(../images/lghtmesh.png) repeat center center;
}
.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}
.rw-sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
    color: #444;
    font-size: 200%;
    font-weight: normal;
}
.rw-words{
    display: inline;
    text-indent: 10px;
}
.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    -webkit-animation: rotateWord 18s linear infinite 0s;
    -ms-animation: rotateWord 18s linear infinite 0s;
    animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 3s; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #6b889d;
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 6s; 
    -ms-animation-delay: 6s; 
    animation-delay: 6s; 
    color: #6b739d; 
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 9s; 
    -ms-animation-delay: 9s; 
    animation-delay: 9s; 
    color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #8d6b9d;
}
.rw-words-1 span:nth-child(6) { 
    -webkit-animation-delay: 15s; 
    -ms-animation-delay: 15s; 
    animation-delay: 15s; 
    color: #9b6b9d;
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 768px){
    .rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
    .rw-sentence { font-size: 9px; }
}

html 很简单

<section class="rw-wrapper">
    <h2 class="rw-sentence">
                <span>Real poetry is like</span>
                <br />
                <span>creating beautiful butterflies</span>
                <br />
                <span>with a silent touch of</span>
                <div class="rw-words rw-words-1">
                    <span>spice</span>
                    <span>colors</span>
                    <span>happiness</span>
                    <span>wonder</span>
                    <span>sugar</span>
                    <span>happiness</span>
                      <span>Hello</span>
                </div>
            </h2>

任何关于如何在单词中添加更多元素的帮助都会有所帮助..

谢谢

Answer 1

嗨，每个单词每 3 秒轮换一次，您需要为您添加的最后一个跨度添加 css，在这种情况下延迟 3 秒，在这种情况下为 18s

.rw-words-1 span:nth-child(7) { 
-webkit-animation-delay: 18s; 
-ms-animation-delay: 18s; 
animation-delay: 18s; 
color: #9b6b9d;
}

并且还将总旋转时间增加 3 秒(即)18+3 = 21s

.rw-words-1 span{
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: rotateWord 21s linear infinite 0s;
-ms-animation: rotateWord 21s linear infinite 0s;
animation: rotateWord 21s linear infinite 0s;
}

这是 JSFIDDLE DEMO 的链接

希望这对您有所帮助!