前端demo逻辑系列之炫酷字体

炫酷字体之放大缩小变色

前言

      很久没更博客了，一直忙于向后学习，并且也思考了我原来那种博客的模式没什么意思，纯教程笔记类博客过于千篇一律，所以我打算开始更新一些学习中的思路方面想法方面的技术博客。本期博客为第一期

js逻辑

1. 从html中获取到标签
2. 将标签内的文字提取出来放置到数组中
3. 迭代数组，清空原有标签里面的内容，将数组中的每个元素放到一个新的标签中
4. 设置移入和动画结束的变色放大缩小事件

css逻辑

• 设置动画（放大缩小变色）

js具体逻辑

      首先获取到文字所在的标签，然后获取标签内的文字将其分隔开放置到数组中，接下来遍历这个数组，将原有文字清除掉，然后创建新标签，将遍历的数组中的每个元素放入到新标签中，到这里就将原有一段文字拆开并且依次放置到了新的标签里展示在了页面中。

      下一步，设置鼠标移动到文字时产生的事件:移入添加动画类名，本次动画结束后移除动画类名。
本来我想的是移出时移出类名，但再一想那样会中断动画的运行

超精细源码及解析

html部分

<div>www.baidu.com</div>

JavaScript部分

// 绑定事件
    let div = document.querySelector("div");
    // 使用 reduce  函数可以迭代数组的所有元素
    // 第一个参数是执行函数，第二个参数为初始值
    // 传入第二个参数时将所有元素循环一遍
    // 不传第二个参数时从第二个元素开始循环
    // 函数参数说明如下
    // 参数	说明
    // prev	上次调用回调函数返回的结果
    // cur	当前的元素值
    // index	当前的索引
    // array	原数组
    [...div.textContent].reduce((pre, cur, index) => {