前端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) => {
        // textContent 属性设置或者返回指定节点的文本内容。 返回值:字符串
        // 获取文本内容,将其展开然后转化为数组
        // eg. <div> www</div>   1.获取到"www" 2.将其展开为"w""w""w" 3.放到数组中 ["w","w","w"]
        //为什么是pre = index时呢因为只有第一个元素pre = index = 0,并且原来标签内的文字就在第一个位置
        // pre = index 时将div内的文字清空   不能直接插入新元素
        pre == index && (div.innerHTML = "");
        // 创建span标签
        let span = document.createElement("span");
        // 让span的文本内容为cur 
        span.textContent = cur;
        // 将span插入到div的下层
        div.appendChild(span);
        //事件监听
        // 鼠标移入时添加类名
        //span.onmouseover = function(){} 也可以
        span.addEventListener("mouseover", function() {
            this.classList.add("changeColor");
        });
        // 动画结束移除类名
        span.addEventListener("animationend", function() {
            this.classList.remove("changeColor");
        });
        // 第二个参数 修改pre初始值,默认情况下pre等于第一个元素
    }, 0);

css部分:

  body {
            /* css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小,”vw”=”view width”, “vh”=”view height”; 
         以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小。  IE10+*/
            /* 充满整个页面 */
            width: 100vw;
            height: 100vh;
            /* flex弹性布局 IE10+ */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
            /* 背景颜色 */
            background: #2c3e50;
        }
        
        * {
            /* 清除浏览器默认内外边距 */
            padding: 0;
            margin: 0;
        }
        
        div {
            /* 字体颜色 */
            color: #9b59b6;
            /* 字体大小 */
            font-size: 5em;
            /* 字体粗细 */
            font-weight: bold;
            /* text-transform 属性控制文本的大小写。 */
            /* capitalize	文本中的每个单词以大写字母开头。 */
            /* uppercase	定义仅有大写字母。 */
            /* lowercase	定义无大写字母,仅有小写字母。 */
            /* inherit	规定应该从父元素继承 text-transform 属性的值。 */
            text-transform: uppercase;
            /* cursor 属性规定要显示的光标的类型(形状)。 */
            cursor: pointer;
        }
        
        div span {
            /* 相对定位 相对与自己进行定位 不会脱离文档流 */
            position: relative;
            /* 将其改变成行块盒 */
            display: inline-block;
        }
        /* 变色动画 */
        
        .changeColor {
            /* 动画名 */
            animation-name: changeColor;
            /* 动画时长 */
            animation-duration: 1s;
            /* 动画方向 */
            animation-direction: alternate;
            /* 动画循环次数 */
            animation-iteration-count: 2;
            /* 动画过渡类型 */
            animation-timing-function: linear;
        }
        /* 变色 + 放大缩小 */
        //@keyframes 创建动画 css3新增
        @keyframes changeColor {
            /* 从什么颜色到什么颜色 */
            /* 未设置0%默认颜色为之前设置的字体颜色 */
            50% {
                color: #f1c40f;
                /* 变换之放大缩小  大于1 ---放大 小于1----缩小 */
                transform: scale(1.5);
            }
            to {
                color: #d81781;
                transform: scale(0.5);
            }
        }

如有不当之处还请指出,如果喜欢我的文章点赞关注我哦!!!

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页