网上找不到纯css实现的效果，自己写了一个，使用时只需要将div加上相应的class即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.warning-line {
    height: 50px;
    width: 100%;
    background-repeat: repeat-x;
    background-size: 100px 100%;
}

.wl-yellow {
    background-image: linear-gradient(-45deg, yellow 33.3%, transparent 33.3%, transparent 66.6%, yellow 66.6%, yellow);
} /*黄色*/
.wl-red {
    background-image: linear-gradient(-45deg, red 33.3%, transparent 33.3%, transparent 66.6%, red 66.6%, red);
} /*红色*/

.wl-2 {
    background-position-x: 50px;
} /*隔行偏移50px*/

@keyframes wl-move {
    from {background-position-x: 0;}
    to {background-position-x: 500px;}
}
.wl-ani {
    animation: wl-move 1s infinite cubic-bezier(0.6,-0.7, 0.4, 1.7);
} /*动画*/

@keyframes wl-move-opposite {
    from {background-position-x: 0;}
    to {background-position-x: -500px;}
}
.wl-ani-opp {
    animation: wl-move-opposite 1s infinite cubic-bezier(0.6,-0.7, 0.4, 1.7);
} /*反向动画*/