前端 文字淡入效果

效果图：

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)
			})
		})