水位波纹动画兼容ie8

效果观看请到下方：

链接：https://pan.baidu.com/s/1AWHz0BHTmj_7Vx6qhSmuaA
提取码：ih9p
复制这段内容后打开百度网盘手机App，操作更方便哦

下面介绍方法：

首先，需要两张图片，一张是长条波浪图，一张是外方内圆的空心图片，都需要是png格式

              

然后就是波浪图从右向左无缝滚动，具体代码如下

<p id="question">
  <img
    class="bottom_img"
    id="yellow_water"
    src="data:images/icon_water_yellow.png"
  />
  <img class="top_img" src="data:images/icon_yellowCircle.png" />
  <span id="question_num"></span>
</p>

// 循环滚动
//初始化一个变量来装定时器
var timer = null;
var num = 0;

function goLeft() {
    if (num == -240) {
        num = 0;
    }
    num -= 1;
    $(".bottom_img").css({
        left: num
    })
}
//设置滚动速度
var timer = setInterval(goLeft, 20);

.home_container>.row>div.left_section #question .top_img,
.home_container>.row>div.left_section #task .top_img {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 100;
}

.home_container>.row>div.left_section #question .bottom_img,
.home_container>.row>div.left_section #task .bottom_img {
    position: absolute;
    /* top: 0; */
    left: -16px;
    width: 400%;
    height: 50%;
    bottom: 0;
}