Javascript CSS中的模糊文本动画

当我查看

three.js的示例时，我看到了的页面。

标题“实现你的创意”有一个动画，显示的文本先模糊，然后清晰。

我试图复制这个：


@关键帧测试{
从{
不透明度：0；
可见性：隐藏；
过滤器：模糊（0.2ex）；
}
到{
不透明度：1；
能见度：可见；
过滤器：模糊（0ex）；
}
}
主体p{
字体大小：32px；
文本对齐：居中；
}
身体#一{
动画：测试2.6s线性；
}
身体#2{
动画：测试2s线性；
}
身体#三{
动画：测试1.5s线性；
}
车身四个{
动画：测试2s线性；
}
五个人{
动画：测试2.6s线性；
}

T
我
T
L
E
使用javascript：


“严格使用”；
document.addEventListener（“DOMContentLoaded”，e=>
{
randBlur（document.getElementsByClassName（“randBlur”）；
setTimeout（（）=>randBlur（[document.getElementById（“delayed”）]），3000；
});
函数randBlur（els、randDurationMin、randDurationMax）
{
如果（！els）
返回；
如果（randDurationMin==未定义）
randDurationMin=0.7；//最小动画持续时间（以秒为单位）
如果（randDurationMax==未定义）
randDurationMax=1.7；//最小动画持续时间（以秒为单位）
if（randBlur.list==未定义）
{
randBlur.style=document.createElement（“样式”）；
document.head.appendChild（randBlur.style）；
randBlur.list={}；
randBlur.applyStyle=（）=>
{
randBlur.style.innerHTML=“”；
for（让我输入randBlur.list）
randBlur.style.textContent+='[randBlur=“'+i+'”]{animation:randBlur'+i+'s linear}'；
}
}
const span=document.createElement（“span”），
text=document.createTextNode（“”），
兰德=（）=>
{
const duration=parseFloat（（Math.random（）*（randurationmax-randurationmin）+randurationmin.toFixed（2））；
randBlur.list[持续时间]=“”；
返回时间；
},
RandfullChildren=el=>
{
if（el.nodeType==el.TEXT\u节点）
{
for（设n=0，ws，box；n

@关键帧和模糊{
从{
不透明度：0；
可见性：隐藏；
过滤器：模糊（0.2ex）；
}
到{
不透明度：1；
能见度：可见；
过滤器：模糊（0ex）；
}
}
身体{
字体大小：1.1米；
文本对齐：居中；
}
h2，h3
{
显示：内联；
}
氢
{
颜色：绿色；
}
P
{
空白：预处理；
}
p元素与文本可以通过编程方式创建字母元素和CSS动画；您不必对所有内容进行硬编码。如下所示：