CSS：实现动态流光线条效果/动态流光线条颜色渐变效果

需求分析

需要实现类似下图中的动态流光线条效果：

思路

提到这种动态绘制矢量图形的需求，一般会想到使用canvas；由于笔者不太熟悉canvas动画也可以考虑用CSS来实现，这里先记录使用CSS实现此效果的尝试过程：
①实现一条带有静态“流光”效果的边，参考CSS渐变背景；
②实现静态线条的“流光”动画效果，参考纯CSS实现背景颜色渐变动画；
③将以上步骤得到的流光边进行旋转（参考CSS-rotate）、镜像翻转（参考CSS水平翻转和垂直翻转），即可实现与此边同向和逆向的其他流光边效果，同时设置旋转和镜像翻转参考CSS同时设置多个变换效果

参考代码

html

<!-- 顺时针的4条边框 -->
<!-- 边框1：最初实现流光动画效果的线条，顶部左->右流光 -->
<div class="light-line right-top">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度得到，右侧上->下流光 -->
<div class="light-line right-bottom">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转180度得到，底部右->左流光 -->
<div class="light-line left-bottom">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转270度得到，左侧下->上流光 -->
<div class="light-line left-top">
  <div class="line-block gradient"></div>
</div>

<!-- 逆时针的4条边框 -->
<!-- 由边框1水平镜像翻转得到，顶部右->左流光 -->
<div class="light-line-r right-top-r">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度、水平镜像翻转得到，右侧下->上流光 -->
<div class="light-line-r right-bottom-r">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转180度、水平镜像翻转得到，底部左->右流光 -->
<div class="light-line-r left-bottom-r">
  <div class="line-block gradient"></div>
</div>
<!-- 由边框1顺时针旋转90度、水平镜像翻转得到，右侧下->上流光 -->
<div class="light-line-r left-top-r">
  <div class="line-block gradient"></div>
</div>

CSS

body {
  background: #2A2A2A;
}

.light-line {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 320px;
  height: 320px;
}

.light-line-r {
  position: absolute;
  top: 20px;
  left: 360px;
  width: 320px;
  height: 320px;
}

/* 渐变流光效果线条，要将横向宽度设置为超过100%的值，否则无动画效果 */
.line-block {
  position: relative;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    -90deg, 
    #FFEFCA 1%, #FFBB1F 4%, transparent 12%, transparent 16%, 
    #FFEFCA 16%, #FFBB1F 19%, transparent 27%, transparent 33%, 
    #FFEFCA 33%, #FFBB1F 36%, transparent 44%, transparent 50%, 
    #FFEFCA 50%, #FFBB1F 53%, transparent 61%, transparent 66%, 
    #FFEFCA 66%, #FFBB1F 69%, transparent 77%, transparent 84%, 
    #FFEFCA 84%, #FFBB1F 87%, transparent 95%, transparent 100%
  );  
  background-size: 200% 100%;
}

/* 指定使用Gradient动画，5s完成一次动画，匀速，无限循环 */
.gradient {
  animation: Gradient 5s linear infinite;
  -webkit-animation: Gradient 5s linear infinite;
  -moz-animation: Gradient 5s linear infinite;
}

/* 定义Gradient动画效果：初始时显示最右端，结束时显示最左端（向右滚动） */
@keyframes Gradient {
  0% {
    background-position: 100% 100%;
    }
  100% {
    background-position: 0% 100%;
  }
}

/* 兼容写法.. */
@-webkit-keyframes Gradient {
  0% {
    background-position: 100% 100%;
    }
  100% {
    background-position: 0% 100%;
  }
}
 
/* 兼容写法.. */
@-moz-keyframes Gradient {
  0% {
    background-position: 100% 100%;
    }
  100% {
    background-position: 0% 100%;
  }
}


.right-top {
  transform: rotate(0deg);
}

.right-bottom {
  transform: rotate(90deg);
}

.left-bottom {
  transform: rotate(180deg);
}

.left-top {
  transform: rotate(270deg);
}


.right-top-r {
  transform: rotate(0deg) rotateY(180deg);
}

.right-bottom-r {
  transform: rotate(90deg) rotateY(180deg);
}

.left-bottom-r {
  transform: rotate(180deg) rotateY(180deg);
}

.left-top-r {
  transform: rotate(270deg) rotateY(180deg);
}