适用场景和效果描述:箭头线的宽度不定,箭头一直向右循环前进,且可随意设置颜色
做不来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/