CSS 之 跑马灯边框

一、简介

​ 之前有做过渐变色边框的样式，然后某天刷抖，看到某个老师在讲跑马灯的样式效果，于是就自己尝试实现一下跑马灯样式的边框，虽然这种样式并不常见（基本没卵用），其使用场景我至今没想到，但是它足够花里胡哨，玩的就是花活。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">跑马灯边框1div>

页面效果：

为了帮助理解，去除掉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">跑马灯边框2div>

页面效果：

为了帮助理解，去除掉overflow: hidden属性的效果图：