流动线条记录

新人工作时，查找资料自学使用

 <div class="line">

    <div class="light-line right-top" >

      <div class="line-block gradient"></div>

    </div>

  </div>

样式文件夹

<style>

.line {

  position: absolute;

  left: 50%;

  top: 27%;

}

.light-line {

  position: absolute;

  top: 20px;

  left: 15px;

  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,

      #7B5A39 1%, transparent 24%, #FFD03B 25%, #7B5A39 40%, #7B5A39 50%,

      #7B5A39 50%, transparent 74%, #FFD03B 75%, #7B5A39 90%, #7B5A39 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(90deg);

} */

</style>