<button onclick="add()">添加</button>
<ul class="list" id="list">
  <li>box</li>
</ul>
.list{
  list-style: none;
  width: 200px;
  color: #fff;
  counter-reset: num;
}
.list li{
  padding: 10px;
  margin: 10px;
  background:slateblue;
  animation:show .5s;
}
.list li:after{
  counter-increment: num;
  content: counter(num)
}
.list li:nth-child(2n + 1) {
  background: tomato
}
.list li:nth-child(3n + 2) {
  background:royalblue
}
.list li:nth-child(5n + 3) {
  background:violet
}
.list li:nth-child(7n + 4) {
  background:tan;
  color: #000;
}
.list li:nth-child(11n + 5) {
  background:yellowgreen
}

@keyframes show{
  from {
    opacity: 0;
    transform: translateX(100px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
}
function add(){
  var child = document.createElement('li');
  child.innerText = 'box';
  document.getElementById('list').appendChild(child);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.