励志当最强课代表的我来给大家总结总结👍👍👍

边框线条动画

视频内容:

1️⃣前言✍️

2️⃣按钮📄

3️⃣动态边款🏷️

视频内容:

1️⃣前言✍️

边框的线条动画，可以用作按钮增加 hover 的动效，也可以用作突出重点内容区域的动态。

2️⃣按钮📄

边框有两个伪元素代替，大小和位置和按钮保持一致，都设置同样样式的边框。

使用 inside 矩形来裁剪边框的两条相邻边英塞的四个参数，按顺序依次代表矩形。

before 裁剪左上角，这里设置 button with 是按钮宽度， heap wait 是裁剪的宽度。同样的方式， after 去裁剪右下角按钮

接着增加按钮的 hover 态，设置两个边框可视区域为整个按钮矩形区域，也就是 insight 传入 4 个 0 的参数。使用 transition 设置 K pad 属性的过渡动画

3️⃣动态边款🏷️

设置裁剪矩形为了方便理解这里设置伪元素的半透明背景，观察这一段过渡动画。设置关键帧从上到左到下到右再回到上，通过 animation 设置无限循环动画 keyframe 设置关键帧，设置边框从上到左到下到右再回到上，这样这实现了单条线框的动画效果。

最后给另一个伪元素设置动画延迟为整个动画时长的一半，并设置为负值，表示跳过对应的时长进入动画周期，这样就完成了无限循环的边框线条移动动画。