有没有办法通过css慢慢地将字母添加到文本中？ [关闭]
Posted
技术标签:
【中文标题】有没有办法通过css慢慢地将字母添加到文本中？ [关闭]【英文标题】：Is there a way to slowly add letters to text by css? [closed] 【发布时间】：2019-03-27 08:14:23 【问题描述】：我想显示一个词（假设慢），有没有办法先显示“慢”，然后通过 CSS 动画在中间添加几个 O， 让它从慢到慢。
我使用的是最新的 chrome，因此欢迎使用任何 CSS3/html5 功能。
【问题讨论】：
我不确定，但您是否正在寻找这种codepen.io/geoffgraham/pen/jrWwWM 类型的动画？ 【参考方案1】：您可以考虑为 span 的最大宽度设置动画，如下所示。
.slow
display: inline-block;
vertical-align: bottom;
max-width: 0.5rem;
overflow: hidden;
animation: slow 2s ease forwards;
@keyframes slow
from
max-width: 0.5rem;
to
max-width: 3rem;
<span>Sl</span><span class="slow">oooooo</span><span>w</span>【讨论】：
只有我一个人在动画完成后只看到一半的o？ Safari 12/MacOS Mojave... - Jup 它在 Chrome 上运行良好，但由于某些奇怪的原因在 safari 上运行不...
@somethinghere 更奇怪的是：在 ios（最新）上，我第一次运行 sn-p 时它运行良好，但之后每次我按“运行 sn-p”按钮时只按了一半一个o出现了。
那是因为3rem 是计算文本宽度的错误方法。实际宽度取决于字体。在我的机器上，Chrome 使用 Times New Roman 并且运行良好，但 Firefox 使用 Liberation Sans，但失败了。
@isanae 我不认为是这样 - safari 使用 Times New Roman，3rem 实际上是指:root 大小，（未修改时）大约为 16 像素（rem 与字体的大小无关，它只是相对于在根 (rem) 或定义它的第一个父 (em) 处定义的像素大小。不要误会我的意思，这可能是它，但它仍然很奇怪。
@somethinghere 字体大小可以在浏览器首选项中设置。如果<html>中是16px，那么3rem就是3*16，也就是48像素。 Times 16px 中的六个 o 确实是 48 像素，我猜这就是为什么在这里使用它的原因，因为 Times 通常是没有指定的默认字体（并且堆栈 sn-ps iframe 基本上没有 css）。如果您的字体不是 Times，那么宽度可能是错误的。例如，16 像素的解放需要 54 像素来处理六个o。【参考方案2】：
您可以将所有额外的os 添加为<span> 元素，然后使用:nth-child 连续为它们设置动画以逐一选择它们：
html, body
height: 100%;
body
display: flex;
h1
font-size: 10vw;
margin: auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
h1 span
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
@keyframes in
from max-width: 0; opacity: 0;
25% max-width: 1em; opacity: 0;
to max-width: 1em; opacity: 1;
h1 span
animation: in 1s;
animation-fill-mode: forwards;
h1 span:nth-child(1) animation-delay: 0s;
h1 span:nth-child(2) animation-delay: 1s;
h1 span:nth-child(3) animation-delay: 2s;
h1 span:nth-child(4) animation-delay: 3s;
h1 span:nth-child(5) animation-delay: 4s;
h1 span:nth-child(6) animation-delay: 5s;
h1 span:nth-child(7) animation-delay: 6s;
h1 span:nth-child(8) animation-delay: 7s;
h1 span:nth-child(9) animation-delay: 8s; <h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>【讨论】：
在 Windows 上，Firefox 额外的“o”偏移到顶部，它们的顶部位于 S 和 l 的顶端，它们的基线大致位于第一个 o 的中心。 > @tom 必须把它交给 Firefox，其中inline-block 的意思是“不要将它与行对齐”； vertical-align: bottom 没有解决任何问题，但为什么 FF 需要表现得特别，天知道。
现在可以正常显示了。【参考方案3】：
是的！
/* Taken from http://animista.net/play/entrances/fade-in */
#animate-1
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
#animate-2
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 1s;
#animate-3
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 2s;
#animate-4
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 3s;
@-webkit-keyframes fade-in
0%
opacity: 0;
100%
opacity: 1;
@keyframes fade-in
0%
opacity: 0;
100%
opacity: 1;
<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>【讨论】：
这只是一个一个地打印字母。不是我要找的 这个答案可以解决：只需将所有字符更改为“o”，在其周围写上sl 和w，然后将H1 更改为SPAN。【参考方案4】：
只是为了好玩，这里有一个实际纯 CSS 的解决方案（即只需要一个 HTML 元素），使用 content CSS 属性：
.expanding-slow::before
content: "Slo";
animation: expand-slow linear 3s both;
.expanding-slow::after content: "w";
@keyframes expand-slow
0% content: "Slo";
20% content: "Sloo";
40% content: "Slooo";
60% content: "Sloooo";
80% content: "Slooooo";
100% content: "Sloooooo";
.expanding-slow--smooth::before
display: inline-block;
content: "Sloooooo";
max-width: 3ch;
overflow: hidden;
vertical-align: text-top;
animation: expand-slow--smooth linear 3s both;
.expanding-slow--smooth::after content: "w";
@keyframes expand-slow--smooth
0% max-width: 3ch;
100% max-width: 8ch;
Using <code>content</code>:
<p class="expanding-slow"></p>
Using <code>max-width</code>:
<p class="expanding-slow--smooth"></p>【讨论】：
在 Safari 12/MacOS Mojave 中无法使用content。 max-width 确实如此，而且很聪明。【参考方案5】：
这是@DarioSanchezMartinez 答案的修订版，更符合您的规范。
/* Taken from http://animista.net/play/entrances/fade-in */
#animate-1
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
#animate-2
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 1s;
#animate-3
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 2s;
#animate-4
-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 3s;
@-webkit-keyframes fade-in
0%
opacity: 0;
100%
opacity: 1;
@keyframes fade-in
0%
opacity: 0;
100%
opacity: 1;
SL<span id="animate-1">o</span><span id="animate-2">o</span><span id="animate-3">o</span><span id="animate-4">o</span>W【讨论】：
以上是关于有没有办法通过css慢慢地将字母添加到文本中？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章