xyeig · April 21, 2019 03:50
diff --git a/css.markdown b/css.markdown
diff --git a/index.html b/index.html
 <button onclick="add()">添加</button>
 <ul class="list" id="list">
  <li>box</li>
 </ul>
diff --git a/script.js b/script.js
 function add(){
  var child = document.createElement('li');
  child.innerText = 'box';
  document.getElementById('list').appendChild(child);
 }
diff --git a/style.css b/style.css
 .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);
	}