Bubbling up lantern effect

index.html Code:

. 1  < UL class = "News-List" > 
2      < Li > Guo obtained 9 ** pyridazin Meme </ Li > 
. 3      < Li > Li ** 29 obtained pyridazin Meme </ Li > 
. 4      < Li > Zhao ** obtained Meme pyridazin 99 </ Li > 
. 5  </ UL >

index.css Code:

 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 Code:

1  / * 
2      randomly generated Meme pyridazin communications
 . 3  * / 
. 4  Kiss ();
 . 5  
. 6  function Kiss () {
 . 7      var usersName = [ 'Zhao', 'money', 'SUN' 'Li', 'peripheral' 'Wu', 'Zheng', 'king', 'Feng', 'Chen', 'Chu', 'Jiang', 'health', 'Shen', 'Korea', 'Yang', 'Zhu', 'Qin ' ,
 8          ' particular ',' many ',' any ',' LU ',' application ',' sheet ',' aperture ',' Cao ',' strict ',' Chinese ',' gold ',' Wei ' 'Tao', 'ginger', 'Qi', 'Frank', 'Zou', 'Yu'
 . 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 }