“拿来主义”学习边框动画，附源码，CV可用

扫码关注：小拾岁月，发送 “边框动画”，获取源码。

需求分析

  从边框的旋转动画，我们可以看出，可以在按钮元素的下方添加给 360°旋转 的元素。同时，边框在运行，所以我们不可以使用功能 border 来实现，却可以通过多个元素的叠加形成间隙来实现一个视觉上的边框。

  经过上述分析可知，完成边框动画需要以下 3 个元素：

• 按钮元素（主元素）
• 下方旋转元素（旋转运动）
• 上方覆盖元素（面积小于主元素，覆盖在主元素上，形成间隙，即“边框”）

---

页面布局

<button class="btn">边框按钮</button>

---

样式处理

• 旋转元素

.btn::before {content: "";width: 200%;height: 200%;background: red;position: absolute;left: 50%;top: 50%;z-index: -1;transform-origin: left top;animation: rotation 1.5s linear infinite;
}@keyframes rotation {to {transform: rotate(360deg);}
}

注意

  我们通过 position: absolute;left: 50%;top: 50%; 将旋转元素定位到主元素的中心点，并且通过 z-index: -1;置于主元素下方。另外，为其添加选中动画。

  对于旋转动画，我们需要特别注意的是动画的 基准点 是元素的左上角，而不是元素中心点, 可以通过 transform-origin: left top; 进行设置。

---

• 覆盖元素

.btn::after {content: "";position: absolute;--gap: 2px;width: calc(100% - var(--gap) *2);height: calc(100% - var(--gap) *2);background-color: #333;left: var(--gap);top: var(--gap);border-radius: inherit;z-index: -1;
}

注意

  针对于覆盖元素，其中--gap: 2px; 是我们预留的边框宽度。

  同时，根据预留边框的宽度做定位处理，使其覆盖在主元素上。

  最后，在调整元素的边框颜色，隐藏超出的部分，就可以实现动画效果了。

---

温馨提示

扫码关注：小拾岁月，发送 “边框动画”，获取源码。