文本阴影的预期"to"或"from"

Question

我想创建这个：

loading...(with dots that move)

我在SASS中有这个代码：

.loading:after 
content: ' .'
animation: dots 1s steps(5, end) infinite
@keyframes dots 
0%, 20% 
color: rgba(0,0,0,0)
text-shadow .25em 0 0 rgba(0,0,0,0), //here this the problem
.5em 0 0 rgba(0,0,0,0)
.... 

当编译时，我有这个错误：

Expected "to" or "from" text-shadow

有人知道我该怎么解决这个问题吗？

Answer 1

你的意思是这样的吗？

HTML:

<p>
Loading
<span class="dot-one">.</span>
<span class="dot-two">.</span>
<span class="dot-three">.</span>
</p>

scs:

.dot-one {
animation: one 1s steps(5, end) infinite;
}
.dot-two {
animation: two 1s steps(5, end) infinite;
}
.dot-three {
animation: three 1s steps(5, end) infinite;
}
@keyframes one {
0% {
color: white;
}
70% {
color: grey;
}
100% {
color: black;
}
}
@keyframes two {
0% {
color: white;
}
40% {
color: grey;
}
100% {
color: black;
}
}
@keyframes three {
0% {
color: white;
}
20% {
color: grey;
}
100% {
color: black;
}
}

我清理了一些关键帧的语法问题，并特别指出了点的用法。我不确定这是否是你心目中的"加载点"的形式。