body {
    margin: 0;
    padding: 0;
    width: 100%;
}

tr {
    border: 2px solid white;
}

tr:nth-child(1) {
    background: black;
    color: white;
}

tr:nth-of-type(2n+3) {
    background: #eee;
}

tr:nth-of-type(2) {
    color: red;
}

tr:nth-of-type(3) {
    color: red;
}

tr:nth-of-type(4) {
    color: red;
}

input {
    width: 20%;
    margin: 25px 25px;
}

input:focus {
    margin: 50px 50px;
    border: 1px solid #fff;
    width: 50%;
    transition: 1s;
}


/*以下非原创*/
* {
  margin:0;
  padding:0;
}

ul {
  list-style:none;
}

#wrap {
  position:relative;
  width:600px;
  height:400px;
  margin:30px auto;
  border:1px solid #9cc5ef;
  overflow:hidden;
}

#slider {
  width:300%;
  height:100%;
  font:100px/400px Microsoft Yahei;
  text-align:center;
  color:#fff;
  margin-left:0;
  -webkit-animation:slide1 3s ease-out infinite;
}

#slider li {
  float:left;
  width:600px;
  height:100%;
}

#slider li:nth-child(1) {
  background:#6bacef;
}

#slider li:nth-child(2) {
  background:#297cd3;
}

#slider li:nth-child(3) {
  background:#01254a;
}

/*创建三种动画策略*/
@-webkit-keyframes slide1 {
  0% { margin-left:0;}
  23% { margin-left:0;}
  33% { margin-left:-600px;}
  56% { margin-left:-600px;}
  66% { margin-left:-1200px;}
  90% { margin-left:-1200px;}
  100% {margin-left:0;}
}

@-webkit-keyframes slide2 {
  0% { margin-left:-600px;}
  23% { margin-left:-600px;}
  33% { margin-left:-1200px;}
  56% { margin-left:-1200px;}
  66% { margin-left:0;}
  90% { margin-left:0;}
  100% {margin-left:-600px;}
}

@-webkit-keyframes slide3 {
  0% { margin-left:-1200px;}
  23% { margin-left:-1200px;}
  33% { margin-left:0;}
  56% { margin-left:0;}
  66% { margin-left:-600px;}
  90% { margin-left:-600px;}
  100% {margin-left:-1200px;}
}


/*修改动画名称*/
#l01:checked ~ #wrap #slider {
  -webkit-animation-name:slide1;
}

#l02:checked ~ #wrap #slider {
  -webkit-animation-name:slide2;
}

#l03:checked ~ #wrap #slider {
  -webkit-animation-name:slide3;
}


/*短暂地取消动画名称，模拟重启动画*/
#l01:active ~ #wrap #slider {
  -webkit-animation-name:none;
  margin-left:0;
}

#l02:active ~ #wrap #slider {
  -webkit-animation-name:none;
  margin-left:-600px;
}

#l03:active ~ #wrap #slider {
  -webkit-animation-name:none;
  margin-left:-1200px;
}


#opts {
  width:600px;
  height:40px;
  margin:auto;
  color:#fff;
  text-align:center;
  font:20px/40px Microsoft Yahei;
}

#opts label {
  float:left;
  width:100px;
  height:40px;
  margin-right:4px;
  background:#01254a;
  cursor:pointer;
}

#opts label:hover {
  background:#405871;
}

/* 隐藏Input按钮*/
#l01, #l02, #l03 {
  display:none;
}