向上冒泡的走马灯效果

index.html代码：

1 <ul class="news-list">
2     <li>郭**获得了9个么么哒</li>
3     <li>李**获得了29个么么哒</li>
4     <li>赵**获得了99个么么哒</li>
5 </ul>

index.css代码：

 1 .news-list {
 2     color:#f87288;
 3 }
 4 .news-list li {
 5     transform:scale(0.9);
 6     width:3.26rem;
 7     height:0.48rem;
 8     line-height:0.48rem;
 9     font-size:0.28rem;
10     opacity:0.6;
11     border-radius:0.24rem;
12     margin:0 auto;
13     background:pink;
14     text-align:center;
15 }
16 .news-list li:first-child {
17     transform:scale(1.0);
18     transition:1s;
19     opacity:1.0;
20 }
21 .news-list li:last-child {
22     transform:scale(0.8);
23     transition:1s;
24     opacity:0.3;
25 }

index.js代码：

 1 /*
 2     随机生成么么哒通报
 3 */
 4 kiss();
 5 
 6 function kiss() {
 7     var usersName = ['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '蒋', '卫', '沈', '韩', '杨', '朱', '秦',
 8         '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻'
 9     ];
10     var usersMoney = [9, 19, 29, 39, 49, 59, 69, 79, 89, 99];
11     var newLi = [];
12     for (var i = 0; i < 35; i++) {
13         newLi[i] =
14             `<li>${usersName[i]}**获得了${usersMoney[parseInt(Math.random() * 10)]}元奖金</li>`;
15     }
16     var index = 0;
17     
18     setInterval(function () {
19         $('.news-list li').eq(index).css({
20             'margin-top':'-0.48rem',
21             'opacity':0
22         });
23         $('.news-list li').eq(index+1).css({
24             'transition': '1s',
25             'transform': 'scale(1.0)',
26             'opacity':1.0
27         });
28         index++;        
29         $('.news-list').append(newLi[parseInt(Math.random() * 35)]);
30     }, 2800);
31 }