效果观看请到下方:
链接:https://pan.baidu.com/s/1AWHz0BHTmj_7Vx6qhSmuaA
提取码:ih9p
复制这段内容后打开百度网盘手机App,操作更方便哦
下面介绍方法:
首先,需要两张图片,一张是长条波浪图,一张是外方内圆的空心图片,都需要是png格式
然后就是波浪图从右向左无缝滚动,具体代码如下
<p id="question"> <img class="bottom_img" id="yellow_water" src="images/icon_water_yellow.png" /> <img class="top_img" src="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; }