html动画箭头,纯css动画实现箭头向右无限前进

适用场景和效果描述：箭头线的宽度不定，箭头一直向右循环前进，且可随意设置颜色

做不来gif，将就看吧

原理： 背景设置渐变色，通过控制遮罩层的图形样式和位置，来实现箭头向右移动的效果，优点遮罩图形和背景图相似不设置是否重复就会无限重复，因此除代码简单外，任意宽度的容器，都是相同的效果。

需要素材：一个向右的小三角svg矢量图

如图

html部分

css部分

.arrow-pic {

width: 100%;

height: 15px;

background-image: linear-gradient(100grad, rgb(237, 64, 20), rgb(255, 153, 0));

animation: move-arrows-data-v-acbcb780 .5s linear infinite;

transform-origin: left;

mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAlCAMAAACAj7KHAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAYZQTFRFAAAA///9tM/8ss789/n8+fv8+Pr8/