大佬教程收集整理的这篇文章主要介绍了单独使用 CSS 是否可以实现这种旋转文字效果？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我发现了一个动画，我认为它可能对我的网站有用。我在博客平台 overblog 上看到的，特别是在这个页面上：https://en.over-blog.com/signup。
我所指的动画会一个接一个地循环播放多个单词（或小短语），然后在循环完所有短语后重新回到开头。
我对 CSS 并不擅长，所以想知道这是否可能仅使用 CSS 完成，或者是否需要 JavaScript 的帮助。
感谢任何建议。
好的...我已经为你做了一个例子
基础很简单。你有一个固定的句子，在它之后，你有一个包含不同文本的列。该列的高度固定为 overflow:hidden;，因此您只能看到列表中的第一个单词。
然后您创建动画以使用 translate3d 属性向上移动单词。
这很容易，但您需要一些时间才能找到合适的翻译百分比，以将单词停在正确的位置。
开始：
0% { transform: translate3d(0,0);}
我发现结束动画的正确百分比是（或多或少）：
95%,100% { transform: translate3D(0,-960%,0);}
我用过 95%,100% 所以这个词停了一会儿再开始
作为最后一个例子，我使用了：
35%,40% { transform: translate3d(0,-320%,0);}
其中 -320% 是（或多或少）第三个词的位置。
这里有：
span {
display:inline-block;
vertical-align:top;
height:50px;
line-height:50px;
}
.column {
display:inline-block;
vertical-align:top;
height:50px;
line-height:50px;
overflow:hidden;
}
ul {
margin:0; padding:0;
}
ul li {
margin-bottom:30px;
}
.animation {
display:block;
animation-name: animation;
animation-duration: 10s;
animation-iteration-count:infinite ;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes animation {
0% { transform: translate3d(0,0);}
35%,0);}
85%,90% { transform: translate3D(0,0);}
95%,100% { transform: translate3d(0,0);}
}<div>
<span>This is a sentence</span>
<div class="column" style="color:red;">
<ul>
<li class="animation" style="color:red;">one</li>
<li class="animation" style="color:blue;">two</li>
<li class="animation" style="color:green;">three</li>
<li class="animation" style="color:red;">four</li>
<li class="animation" style="color:blue;">five</li>
<li class="animation" style="color:green;">six</li>
<li class="animation" style="color:red;">seven</li>
</ul>
</div>
</div>
找到合适的位置停止每一个字。
已编辑：我对 snippet 进行了一些更改，以使单词像您的示例一样返回原点
以上是大佬教程为你收集整理的单独使用 CSS 是否可以实现这种旋转文字效果？全部内容，希望文章能够帮你解决单独使用 CSS 是否可以实现这种旋转文字效果？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。