静态渐变
/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);//初始化
效果如下：
目前暂时没有较好的方法让渐变色进行动画渐变
