<div class="emojis">
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
  <img class="emoji" src="http://img.cdn.sugarat.top/mdImg/MTU4NDE1NzU4NTE2Mg==584157585163"></img>
</div>
.emojis {
  display: flex;
  width: 91px;
  height: 91px;
  flex-wrap: wrap;
}

.emoji {
  width: 30px;
  height: 30px;
  visibility: hidden;
  box-sizing: border-box;
}
// 获取到所有的
let $emojis = document.querySelectorAll(".emoji");
// 记录上次展示和当前展示的
let oldFlag = 4,
  newFlag = 4;
function loop() {
  $emojis[oldFlag].style.visibility = "hidden";
  $emojis[newFlag].style.visibility = "visible";
  oldFlag = newFlag;
  newFlag = ~~(Math.random() * 100) % 9;
  setTimeout(loop, 1000);
}
loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.