css - CSS打字机效果从右到左开始
问题描述
我的代码有问题。流程很好,但我希望第 3 到第 5 个p
标签从右到左开始写,我所能做的就是从左到右。
p {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
width: 30em;
}
p:nth-child(1) {
animation: type 3s steps(200, end);
}
p:nth-child(2) {
font-weight: normal;
animation: type2 3s steps(300, end);
}
p:nth-child(3) {
animation: type3 5s steps(400, end);
}
p:nth-child(4) {
animation: type4 4s steps(400, end);
}
p:nth-child(5) {
animation: type5 4.5s steps(600, end);
}
@keyframes type {
0% {
width: 0;
}
}
@keyframes type2 {
0% {
width: 0;
}
25% {
width: 0;
}
50% {
width: 100;
}
75% {
width: 100;
}
100% {
width: 100;
}
}
@keyframes type3 {
0% {
width: 0;
}
25% {
width: 0;
}
50% {
width: 0;
}
75% {
width: 100;
}
100% {
width: 100;
}
}
@keyframes type4 {
0% {
width: 0;
}
25% {
width: 0;
}
50% {
width: 0;
}
75% {
width: 0;
}
100% {
width: 100;
}
}
@keyframes type5 {
0% {
width: 0;
}
25% {
width: 0;
}
50% {
width: 0;
}
75% {
width: 0;
}
100% {
width: 100;
}
}
<p>Opinion</p>
<p>Break</p>
<p>Thought</p>
<p>and</p>
<p>Peace</p>
解决方案
推荐阅读
- apache-spark - 用于结构化流的 QueueStream 可能吗?
- java - Talend 日期:将 EST 时间解析为 UTC
- java - 数苹果和橙子
- coldfusion - ColdFusion FarCry CMS 安装问题
- java - 在java中以金字塔模式打印XO?
- android - 某些 unicode 字符无意中被转换为 Android TextView 中的标志表情符号
- c# - C# 字符串到所有样式或文化的十进制
- php - PHP 函数 stripcslashes 未按要求转换
- java - 整数的反转数字:如何找出数字是否溢出?
- sql - 使用 MAX() 和 VALUES() 优化 SQL 语句