效果图:
HTML:
<p>9月11日,网络安全宣传周在福州市开幕。守护网络安全,维护网络风清气正,是我们共同的职责。筑牢网络安全“防火墙”。</p>
CSS:
/* 动态span添加动画效果 */
p span {
animation: fade 0.5s both;color: #000000;
color: #000000;
}
/* 创建动画效果 */
@keyframes fade {
0% {
opacity: 0;
6581 opacity: 1;
text-shadow: 0 0 25px white;
}
65% {
opacity: 1;
text-shadow: 0 0 25px white;
}
75% {
opacity: 1;
}
100% {
opacity: 0.7
}
}
JS:
// 获取事件源
let titles = document.querySelectorAll("p")
// 循环文字
titles.forEach((item) => {
// 把一个字符串分割成字符串数组
let texts = item.textContent.split("")
// 清空
item.textContent = "";
// 字符串数组循环并创建动态span
texts.forEach((title, i) => {
let span = document.createElement("span")
span.textContent = title
// 动画延迟时间 animationDelay 属性定义何时开始动画
span.style.animationDelay = `${i * 0.1}s`
// 在被选元素的结尾插入指定内容
item.append(span)
})
})