旋转词 CSS

【问题标题】：Rotating words CSS旋转词 CSS
【发布时间】：2020-01-26 15:42:39
【问题描述】：

我正在尝试基于 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>

【问题讨论】：

  • 请同时发布您的 CSS 代码。

标签： css rotation word


【解决方案1】：

如果没有 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>

【讨论】：

    【解决方案2】：

    我建议您对代码进行一些修改。首先将单词the girl. 放在span 标记中以便轻松操作它。然后应用一些css 来为使用padding-left 的动画词留出空间，就像这样：

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

    【讨论】：

    • 动画部分好多了！ “想要”、“需要”和“爱”这些词非常接近“女孩”部分。我可以设置某种宽度以使单词始终占用相同的空间吗？
    • @micks88 我更新了我的答案。对你更好吗？
    • 是的。谢谢！如果我想去掉淡入淡出部分，只让文字出现/消失怎么办？我真的很难理解这个动画。我不明白这其中的不透明部分。
    • @micks88 好吧，我觉得我们离开始的地方有点太远了……您的要求实际上是：一个新问题。然后最好将其提出，而不是添加另一个新版本的答案。那么你能不能先validate这个答案，然后再用你的新请求问另一个问题？我很乐意回答;)
    • 好吧，我不一定想摆脱动画。我只是想了解动画部分。我想加快淡入淡出，以免单词重叠。
    猜你喜欢
    • 2016-01-02
    • 2012-09-09
    • 1970-01-01
    • 1970-01-01
    • 2015-07-28
    • 2014-02-27
    • 2022-01-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode