旋转词CSS

Question

我正在尝试根据 CSS 做一个非常简单的旋转单词。不过我有两个问题：

1) 如何让最后的淡入淡出更快？这些词以我现在不喜欢的方式重叠
2) 如果旋转的单词很长，它会弄乱并与下一个单词重叠。我已经为此腾出了一些空间，但肯定有更好的方法吗？

这是一个 jsfiddle。

/*/
 ROTATING WORDS
 /*/

.rw-words{
 display: inline;
 text-indent: 10px;
}
.rw-words span{
 position: absolute;
 opacity: 0;
 overflow: hidden;
 width: auto;
 color: #0f269e;
}
.rw-words-1 span{
 -webkit-animation: rotateWordsFirst 14s linear infinite 0s;
 -ms-animation: rotateWordsFirst 14s linear infinite 0s;
 animation: rotateWordsFirst 14s linear infinite 0s;
}
}
.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
 -ms-animation-delay: 0s; 
 animation-delay: 0s; 
 color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
 -ms-animation-delay: 2s; 
 animation-delay: 2s; 
 color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
 -ms-animation-delay: 4s; 
 animation-delay: 4s; 
 color: #0f269e; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
 -ms-animation-delay: 6s; 
 animation-delay: 6s; 
 color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
 -ms-animation-delay: 8s; 
 animation-delay: 8s; 
 color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
 -ms-animation-delay: 10s; 
 animation-delay: 10s; 
 color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
 -ms-animation-delay: 12s; 
 animation-delay: 12s; 
 color: #0f269e;
}
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
 25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
 25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
 25% { opacity: 0; height: 60px; }
    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; }
}

    <span>The boy
        <div class="rw-words rw-words-1">
            <span>sees </span>
            <span>wants </span>
            <span>uses </span>
            <span>finds </span>
            <span>needs </span>
            <span>tries </span>
            <span>loves </span>
        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the girl.</span>

Answer 1

我建议您对代码进行几处修改。先把the girl.这几个字放在一个span标签里，方便操作。然后对其应用一些 css 以获得使用 padding-left 的动画单词的 space 就像这样：

.rw-words{
 display: inline;
}

#girlWord {
  margin-left: 40px;  /* <-- Add space for the animated words  */
}

.rw-words span{
 position: absolute;
 opacity: 0;
 overflow: hidden;
 width: auto;
 color: #0f269e;
}
.rw-words-1 span{
 animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
 -ms-animation-delay: 0s; 
 animation-delay: 0s; 
 color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
 -ms-animation-delay: 2s; 
 animation-delay: 2s; 
 color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
 -ms-animation-delay: 4s; 
 animation-delay: 4s; 
 color: #0f269e; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
 -ms-animation-delay: 6s; 
 animation-delay: 6s; 
 color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
 -ms-animation-delay: 8s; 
 animation-delay: 8s; 
 color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
 -ms-animation-delay: 10s; 
 animation-delay: 10s; 
 color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #0f269e;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 0; height: 60px; }
   25% { opacity: 0; height: 60px; }
    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; }
}

<span>The boy
  <div class="rw-words rw-words-1">
    <span>sees </span>
    <span>wants </span>
    <span>uses </span>
    <span>finds </span>
    <span>needs </span>
    <span>tries </span>
    <span>loves </span>
  </div>
  <span id="girlWord">the girl.</span> <!-- Wrap the word in a span -->
</span>

Answer 2

如果没有 JS（或者可能是一些令人惊叹的 CSS 魔法），您将难以适应 'rotating' 单词的间距。那么为什么不把它作为一个特色呢？例如：

.rw-words {
  display: inline-block;
  border: 2px solid blue;
  border-width: 0 0 2px 0;
  height: 1.1em;
  width: 4em;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
}

.rw-words span {
  display: block;
  position: absolute;
  bottom: -100%;
  opacity: 0;
  overflow: hidden;
  width: auto;
  color: #0f269e;
}

.rw-words-1 span {
  -webkit-animation: rotateWordsFirst 14s linear infinite 0s;
  -ms-animation: rotateWordsFirst 14s linear infinite 0s;
  animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) {
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
  color: #0f269e;
}

.rw-words span:nth-child(2) {
  -webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;
  color: #0f269e;
}

.rw-words span:nth-child(3) {
  -webkit-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation-delay: 4s;
  color: #0f269e;
}

.rw-words span:nth-child(4) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0f269e;
}

.rw-words span:nth-child(5) {
  -webkit-animation-delay: 8s;
  -ms-animation-delay: 8s;
  animation-delay: 8s;
  color: #0f269e;
}

.rw-words span:nth-child(6) {
  -webkit-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
  color: #0f269e;
}

.rw-words span:nth-child(7) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0f269e;
}

@-webkit-keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@-ms-keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}

<div>The boy
  <div class="rw-words rw-words-1">
    <span>sees</span>
    <span>wants</span>
    <span>finds</span>
    <span>needs</span>
    <span>tries</span>
    <span>loves</span>
    <span>respects</span>
  </div> the girl.</div>

旋转词CSS

Rotating words CSS

css

rotation

word