时间戳

首页 > 解决方案 > 旋转词 CSS

css - 旋转词 CSS

问题描述

我正在尝试基于 CSS 做一个非常简单的旋转单词。我有两个问题：

1）我如何使最后的褪色更快？这些词以我目前不喜欢的方式重叠
2）如果一个旋转的词很长，它会与下一个词混淆并重叠。我已经为此腾出了一些空间，但肯定有更好的方法吗？

这是一个jsfiddle。

https://jsfiddle.net/cqrauey4/

/*/
	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>

标签： cssrotationword

解决方案

如果没有 JS（或者可能是一些惊人的 CSS 魔法），您将很难处理“旋转”单词的间距。那么为什么不把它作为一个功能呢？例如：

.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>

推荐阅读