CSS——用less绘制渐变动画

静态渐变

/deep/ .dv-scroll-ranking-board .ranking-column .inside-column{
  background-image: -webkit-linear-gradient(left, #1674D6, #2392E0 40%,#38C0F1 75%, #49E6FE 100%);
}

 效果如下：

 可以直接用background-image对动画进行渐变

用less做渐变动画

因为less不能直接识别@keyframes所以需要通过自身转义给css，让css可以识别less动画

/deep/ .dv-scroll-ranking-board .ranking-column .inside-column{
/*   background-image: -webkit-linear-gradient(left, #1674D6, #2392E0 40%,#38C0F1 75%, #49E6FE 100%); */
  .animation(first,5s,linear,0s,infinite,reverse)
}
.keyframes(@fx,@fy,@tx,@ty,@name){
  @keyframes @name
  {
    0% {
       background-color: red;
    }
    
    50%{
      background-color: pink;
    }
    100% {
      background-color: red;
    }
  }

}
//固定模式
.animation(@animation-name, @animation-duration, @animation-timing-function, @animation-delay,
@animation-iteration-count,
@animation-direction)
{
  animation: @arguments;
  /* Firefox: */
  -moz-animation: @arguments;
  /* Safari 和 Chrome: */
  -webkit-animation: @arguments;
  /* Opera: */
  -o-animation: @arguments;
}
.keyframes(0,0,0,0,first);//初始化

效果如下：

 目前暂时没有较好的方法让渐变色进行动画渐变