这是我参与「第五届青训营」伴学笔记活动的第5天。

CSS相关

2月7日 打卡 day1

今日学习 《还在用 JS 做节流吗？CSS 也可以防止按钮重复点击》。

总结：

pointer-events + animation + :active;

这种实现的好处在于禁用逻辑和业务逻辑是完全解耦的;

缺点在于该实现仅限于点击行为，若节流用于滚动事件或键盘事件上，还是应该选用传统实现; CSS 实现和 JS 实现思维不同，重点在于找到和该场景相关联的属性；

还在用 JS 做节流吗？CSS 也可以防止按钮重复点击 - 掘金 (juejin.cn)

2月8日 打卡 day2

今日学习 《还在用定时器吗？借助 CSS 来监听事件》。

总结：

相比于 JS 定时器而言，CSS 在控制定时器的开启和暂停上更有优势。传统 JS 定时器在鼠标移入后停止、移出后重新开始等场景有些许麻烦，比如在嵌套的 DOM 结构上，因为事件冒泡等被触发，而 CSS 在这些场景上有更好的效果。

1. :hover 配合 transition 延时、transitionend 监听可以实现鼠标经过延时触发效果。
2. :active 配合 transition 延时、transitionend 监听可以实现长触发效果。
3. CSS 动画设置 infinite 后配合 animationiteration 监听可以实现周期性出发效果。
4. 可以直接通过 :hover 来控制动画的暂停和播放。

应用场景：轮播图、长按触发事件、hover延时触发

还在用定时器吗？借助 CSS 来监听事件 - 掘金 (juejin.cn)

2月9日 打卡 day3

今日学习 《纯 JS 实现语雀的划词高亮功能》。

Notice：语雀实现的划词评论功能是基于 canvas 实现的，与页面结构完全解耦。

总结-实现思路：

通过生成一个 canvas 元素，让 canvas 元素与需要划词高亮功能的文本容器元素等宽高，并且重叠在文本容器上，划词的时候获取划词区域的文本节点相对于文本容器的位置信息，然后通过这些位置信息进行高亮背景的渲染。

实现细节：

1. 让 canvas 与文本容器元素重叠 让 canvas 与文本容器元素重叠的最好实现方式是将 canvas 作为文本容器的直接子节点，然后容器相对定位，canvas 绝对定位，上右下左设为0，保证 canvas 与容器等宽高。 为 canvas 添加 css 属性：pointerEvents: 'none', 可以让 canvas 不响应鼠标事件，从而让底部文本节点可以正常划词。
2. 获取划词区域文本节点的位置信息。 range.getClientRects() 可以拿到多行划线文本位置。 document.getSelection().getRangeAt(0) 获取当前划词区域的 range 对象，这个对象可以获取到划词区域的起始和终止文本节点以及偏移量信息。 之后通过创建 range 对象获取任何一文本节点中任何一段文本相对于整个页面的位置信息，然后通过减去文本容器元素相对于整个页面的位置信息，就可以得到划词区域文本相对于文本容器的位置信息。
3. 获取头尾中间的文本节点 document.getSelection().getRangeAt(0) 可以获得划词头尾节点的信息，但头尾中间如果有其他文本节点也需要背景高亮，我们可以从头节点开始进行深度优先遍历，遍历到尾节点为止，然后收集遍历过程中的所有文本节点，之后通过第二点方法得到所有文本节点的位置信息。
4. 处理跨行文本节点的位置信息。 跨行文本节点采用一个 range 去获取位置信息的方案有缺陷，因为 range 只能是一个矩形，不能是不规则图形。解决思路是将一个跨行 range 拆分成多个不跨行的 range。思路是使用二分法方式找到每一行的最后一个文本节点去拆分。判断两个字符是否在同一行，通过创建一个单位长度的 range，比较 range 位置信息中的 top 是否相同来判断。
5. 划词信息持久化与返显。 实现与页面文本结构结偶。使用类似 XPath 方式进行存储，对于头尾节点，我们保存一个路径数组，里面存储从文本容器通过 childNodes 属性遍历下去找到的该节点信息。

纯 JS 实现语雀的划词高亮功能 - 掘金 (juejin.cn)

2月10日 打卡 day4

今日学习 《(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版)》。

简记：

文章使用 几何原理 和 WebDOM 实现几何画板。

画布的点阵背景使用「CSS」背景样式实现。

生成矩形的元数据可以包含：元素类型、矩形的唯一 key（Date.now()，方便后续快速查找该图形）、矩形的初始化样式。

对象查找：map(if return);

坐标点左右的正负处理：dx,dy, Math.abs(),parseFloat();

用户行为判断：如果点击后没有拖动，就将 mousedown 时创建的元素清空，拖动后无法获取点击时坐标位置，所以这个顺序是必须的。

(10月最新) 前端图形学实战: 从零开发几何画板(vue3 + vite版) - 掘金 (juejin.cn)

2月11日 打卡 day5

今日学习 《别整一坨 CSS 代码了，试试这几个实用函数》。

总结： Max(), Min(), Clamp() 中 Clamp() 笔者最常用。 clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小最大只范围时，在最大值和最小值之间选择一个值使用。

应用场景：

流体尺寸和定位： 图片容器宽度变小时，缩小图片尺寸避免变形，一般使用百分比单位解决。

装饰性元素：页面边角的装饰性元素需要有响应式，除了使用媒体查询，还可以使用 clamp() 函数。

流体高度：页面的主区高度需要根据视口大小变化时，可以使用媒体查询和使用视口单位方法。需要注意的是，在较大视口上高度不能过高，所以需要设置一个最大高度，通过 clamp()我们可以只用一个 CSS 声明来设置最小、首选和最大高度。首选可用视口单位。

Loading Bar：进度条实现时 100% 进度块跑出容器外的情况，通过 calc() 减去进度条宽度并不是 100% 有效。可以使用 CSS 变量、clamp() 和比较函数来更好地实现。相同方式还可以处理相同逻辑的 UI 组件。

动态分割器：桌面端分隔符在移动端上应该变成水平的，笔者解决方案是使用 flex 和一个 边框 作为伪元素，以填补垂直和水平状态的可用空间。

动态 border radius: 使用 max() 函数，根据视口宽度，将卡片边角弧度进行切换。calc((100vw - 4px - 100%) * 9999。

间距：有时需要根据视口宽度改变一个组件或网格的间距。

别整一坨 CSS 代码了，试试这几个实用函数 - 掘金 (juejin.cn)

2月12日 打卡 day6

今日学习 《涨姿势了，这 4 个场景可用 CSS 完全取代 JS ~》。

颜色选择器：<input type="color" value="#FF99FF">, 不必再像过去使用复杂的 JS 实现。

打字效果：@-webkit-keyframes typing / blink-caret。

滑顶/触底效果：过去使用 JS 实现，现在只需 CSS 一行代码即可实现平滑滚动至指定位置:scroll-behavior: smooth;。

顺滑切图：scroll-snap-type: x mandatory 实现顺滑切图，效果是只滑轮很小一点距离，会自动切换至图片中心。

涨姿势了，这 4 个场景可用 CSS 完全取代 JS ~ - 掘金 (juejin.cn)

2月13日 打卡 day7

今日学习 《超强的苹果官网滚动文字特效实现》。

动画表现是：随着页面向下滚动，文字从无到有，再经历一系列渐变色变化，最后逐渐消失。

总结实现：

background-clip: text; 文字设为透明 color: transparent。 mix-blend-mode： 结合滚动实现动画。

详解： 随鼠标滚动移动背景的 background-position 即可。

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

background-clip: text 可以实现背景被裁剪成文字的前景色。以区块内文字作为裁剪区域向外裁剪，文字背景即为区块背景，文字之外的区域都将被裁剪掉。

借助混合模式，可以实现不同的颜色叠加效果，之后简单借助 overflow: hidden, 裁剪掉 .text 元素外的背景移动，就可实现动画。

Tips: 使用传统方法实现的话，对于页面滚动配合动画时间轴，通常会使用 GSAP。

超强的苹果官网滚动文字特效实现 - 掘金 (juejin.cn)