一、简介
之前有做过渐变色边框的样式，然后某天刷抖🎵，看到某个老师在讲跑马灯的样式效果，于是就自己尝试实现一下跑马灯样式的边框，虽然这种样式并不常见（基本没卵用），其使用场景我至今没想到，但是它足够花里胡哨，玩的就是花活。CSS才是前端最难精通的技术，也是前端对于后端最大的技术难点。以后可不敢在简历上写精通、熟练CSS了，最多写个见过CSS就可以了。
经过一番实践，我实现了两种形态的跑马灯样式边框，其效果如下图所示。其主要使用的CSS属性有：overflow、position、transform、 animation、@keyframes以及::after和::before等等。
案例效果：
二、具体代码
1、首尾不相连的跑马灯边框
实现思路：
border属性本身肯定是实现不了跑马灯的效果，因为其不能变化。因此我们就要想别的办法来实现边框的样式。实现方法：
① 利用padding属性使元素的内容区域与最外层之间形成一个间隔。
② 利用伪元素::after 和position，将该伪元素模拟为元素的内容区域，并设置背景颜色和圆角等样式，此时我们就实现了一个有透明边框的元素了，padding区域就是边框区域。
③ 利用伪元素::before定义一个具有渐变色背景的伪元素，然后通过动画使其围绕元素的中心点旋转。该伪元素的渐变背景决定了跑马灯边框的颜色。
④设置元素的overflow: hidden;，隐藏伪元素::before在旋转时，超出元素的部分，并通过设置层级，使伪元素::after 覆盖在伪元素::before之上。这样旋转的伪元素::before就只能在padding区域内显示出来，也就是将其模拟成边框的效果，再加上旋转动画，从而显示出跑马灯边框的效果。
具体代码：
<style>/* 定义一个全局的css变量 该宽度决定了边框的宽度 */:root {--border-width: 5px;}/* 定义盒子区域的宽高 包含边框所占区域 */.d1 {position: relative;width: 200px;height: 60px;/* 为了让内容区域不被边框覆盖 设置等宽的padding */padding: var(--border-width);margin: 200px auto;/* 设置元素圆角 */border-radius: 10px;text-align: center;line-height: 60px;color: #333;/* 隐藏超出的部分 这很重要 */overflow: hidden;}/* 利用伪元素::after 定义盒子内容区域 */.d1::after {content: '';position: absolute;/* 使用css变量定位内容区域位置 */left: var(--border-width);top: var(--border-width);/* 根据css变量设置内容区域的宽高 */width: calc(100% - var(--border-width) * 2);height: calc(100% - var(--border-width) * 2);background: #ccc;/* 设置元素层级小于父级元素 使父元素的内容能够显示在该内容区域之上 */z-index: -1;/* 设置圆角 要比父元素的圆角小一些 */border-radius: 6px;}/* 利用伪元素::before 定义盒子边框区域 */.d1::before {content: '';position: absolute;/* 利用定位将元素的左上角定位到父元素的中心 */left: 50%;top: 50%;/* 设置该元素的宽高 要大于父元素的宽高 */width: 220px;height: 220px;/* 设置该元素的渐变背景 */background: linear-gradient(90deg, #000, yellow 20%);/* 设置该元素的层级 要小于用伪元素::after 定义的盒子内容区域 */z-index: -2;/* 利用动画旋转该元素 */animation: rotate1 1.3s linear infinite;/* 定义旋转的圆心为元素的左上角 */transform-origin: 0 0;}/* 声明旋转动画 */@keyframes rotate1 {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style><!-- 跑马灯边框的根元素 -->
<div class="d1">跑马灯边框1</div>
页面效果：
为了帮助理解，去除掉overflow: hidden属性的效果图：
2、首尾相连的跑马灯边框
实现思路：
其实该样式的实现思路与前面的基本相同，只不过是修改了边框元素的位置和旋转的中心点，使其能够在旋转动的过程中，覆盖边框的所有区域，从而使跑马灯首尾相连。实现方法：
① 利用padding属性使元素的内容区域与最外层之间形成一个间隔。
② 利用伪元素::after 和position，将该伪元素模拟为元素的内容区域，并设置背景颜色和圆角等样式，此时我们就实现了一个有透明边框的元素了，padding区域就是边框区域。
③ 利用伪元素::before定义一个具有渐变色背景的伪元素，先通过position和transform使该伪元素的中心点与根元素的中心点对齐，然后通过动画使其围绕元素的中心点旋转。同时该伪元素的渐变背景决定了跑马灯边框的颜色。
④设置元素的overflow: hidden;，隐藏伪元素::before在旋转时，超出元素的部分，并通过设置层级，使伪元素::after 覆盖在伪元素::before之上。这样旋转的伪元素::before就只能在padding区域内显示出来，也就是将其模拟成边框的效果，再加上旋转动画，从而显示出跑马灯边框的效果。
具体代码：
<style>/* 定义一个全局的css变量 该宽度决定了边框的宽度 */:root {--border-width: 5px;}/* 定义盒子区域的宽高 包含边框所占区域 */.d2 {position: relative;width: 200px;height: 60px;/* 为了让内容区域不被边框覆盖 设置等宽的padding */padding: var(--border-width);margin: 200px auto;/* 设置元素圆角 */border-radius: 10px;text-align: center;line-height: 60px;color: #333;/* 隐藏超出的部分 这很重要 */overflow: hidden;}/* 利用伪元素::after 定义盒子内容区域 */.d2::after {content: '';position: absolute;/* 使用css变量定位内容区域位置 */left: var(--border-width);top: var(--border-width);/* 根据css变量设置内容区域的宽高 */width: calc(100% - var(--border-width) * 2);height: calc(100% - var(--border-width) * 2);background: #ccc;/* 设置元素层级小于父级元素 使父元素的内容能够显示在该内容区域之上 */z-index: -1;/* 设置圆角 要比父元素的圆角小一些 */border-radius: 6px;}/* 利用伪元素::before 定义盒子边框区域 */.d2::before {content: '';position: absolute;/* 利用定位和位移将元素的中心点定位到父元素的中心点 */left: 50%;top: 50%;transform: translateY(-50%) translateX(-50%);width: 220px;height: 220px;/* 设置该元素的渐变背景 该背景决定了跑马灯边框的颜色 */background: linear-gradient(-45deg, #000, yellow 60%);/* 设置该元素的层级 要小于用伪元素::after 定义的盒子内容区域 */z-index: -2;/* 利用动画旋转该元素 */animation: rotate2 1.5s linear infinite;/* 设置旋转的圆心为元素的中心点 */transform-origin: 50% 50%;}/* 声明旋转动画 旋转的同时 保持元素位置不变 */@keyframes rotate2 {0% {transform: translateY(-50%) translateX(-50%) rotate(0deg);}100% {transform: translateY(-50%) translateX(-50%) rotate(360deg);}}
</style><!-- 跑马灯边框的根元素 -->
<div class="d2">跑马灯边框2</div>
页面效果：
为了帮助理解，去除掉overflow: hidden属性的效果图：
