网页动画中经常用到跑马灯、流光特效，很多人自然想到用js实现，甚至使用canvas去完成，今天分享一个纯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);
}
