炫酷字体之放大缩小变色

前言

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

js逻辑

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

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

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

前端demo逻辑系列之炫酷字体相关推荐

前端demo逻辑系列之评分插件之弹幕
弹幕前言本文的弹幕效果跟B站上的看起来差不多.本文demo利用原生JavaScript搭建. 本文的源码github地址https://github.com/tjlcy/BulletScreen ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》
本案例为一个 threejs 的特效网页,大小球体进行包裹,外球体为透明材质,但是进行了线框渲染,使其能够通过外球踢查看其内球体. 注:案例参考源于互联网,在此做代码解释,侵删本案例除 ThreeJ ...
【C# Demo】真的好炫酷！霓虹灯字体特效
C#霓虹灯特效字体介绍设计源码介绍 C#中有多种显示框架,常见的普通框架,显示效果一般,用于个人使用或内部人员使用是足够的,但是给用户使用的客户端,界面就不能太过简洁,所以就有了XAML. X ...
python系列之炫酷新年烟花秀
新年即将来到,不给小伙伴们安排一下烟花代码吗!!! 第一步打开python charm 第二步创建项目第三步复制粘贴以下代码最后一步运行程序 import pygame from rand ...
C语言系列之炫酷新年烟花秀（带新年祝福）
新年即将到来,由于全国各地的政策不一样,也许有的地方会禁止燃放烟花,那么就来一款别开生面的电子烟花,让大家感受一下过年的氛围吧. 代码呈上: #pragma once #include<stdi ...
android 动态进度条,Android实用view系列------炫酷的进度条
不知不觉距离上次写文章已经过去大半个月了,原本计划每周写一篇的想法在坚持几周之后最终还是被生活中各种各样的琐事打乱,无奈中夹杂这对自己的一点失望. 心痛.jpg 当初的愿望实现了吗事到如今只好祭奠吗 ...
给页面写一个炫酷的时钟特效【web前端】
文章目录一.前言二.想法设计/实现过程三.基本样式四.时间函数控制器五,时,分,秒占位六.时间动态填充一.前言今天看到某网站的时间特别的丑陋,所以就诞生了写一个看时间的炫酷的时钟前端页 ...

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