移动的错觉
斜纹进度条：
视觉上是前进，实际上是上下移动。
CSS代码：
.flow-twill {
padding-right: 30%;
height: calc(1.4142 * 20px);
background: repeating-linear-gradient(45deg, teal, teal 10px, transparent 11px, transparent 19px, teal 20px);
background-clip: content-box;
animation: twill 1s linear infinite;
position: relative;
}
.flow-twill::before {
content: '';
position: absolute;
width: 100%; height: 100%;
background: linear-gradient(rgba(0,0,0,.5), hsla(0,0%,100%,.5), rgba(0,0,0,.5));
}
@keyframes twill {
from {
background-position: 0 0;
}
to {
background-position: 0 calc(-1 * 1.4142 * 40px);
}
}
HTML代码：
<div class="flow-twill"></div>