JS中使用reduce函数配合css3动画实现超好看的文字效果

最新推荐文章于 2023-02-06 14:45:19 发布

努力中的小mi

最新推荐文章于 2023-02-06 14:45:19 发布

阅读量1.2k

点赞数 2

文章标签： html javascript css css3 vscode

本文链接：https://blog.youkuaiyun.com/weixin_54345600/article/details/119208288

版权

这篇博客介绍如何利用JavaScript的reduce函数配合CSS3动画，实现一个超酷的文字效果。通过创建span包裹每个文字，绑定mouseenter事件，以及应用CSS动画和animationend事件，最终实现了一个动态的文字展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🍞Text Result.

🍿效果展示🥪

大家好我是智障人称“吴签”
接下来给大家带来的是一个非常炫酷的文字效果😎 里面使用了javascript的函数reduce来创建span包裹每一个文字，然后使用 classList.add 添加来完成动画效果，最后再使用一个动画时间 animationend 来删除类。😁

🍿效果展示🥪

🙅‍ 第 1 步 - 搭建基本结构

这里我们使用一个div进行对文字的包裹，后面使用js代码来创建任意标签来包括我们的文字。😍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>炫酷文字效果</title>
	</head>
	<body>
		<div>chengjisimi love zhangxi</div>
	</body>
</html>

🙅‍ 第 2 步 - 使用 js 包裹每一个文字

第一步😫：我们先获取文档上面的 div。

var div = document.querySelector("div");

第二步🥱：使用 textContent 获取 div 里面的值，转化为数组。

let text = div.textContent.split("");

第三步😮：使用 reduce 创建包裹每一个文字。

text.reduce(function (pre,cut,index) {
   
	pre == index ? (div.innerHTML = "");
	let span = document.createElement("span");
	span.innerHTML = cut;
	div.appendChild(span);
},0)