纯CSS3动画：一棵跳舞的树

首先你需要相信的是，下面的这个会跳舞的树是用纯HTML5和CSS3实现的，没有用任何的SVG、flash、JavaScript等技术，就是html和css。

相信这会让你觉得不可思议，是的，难以相信。首先这棵树明显是个递归结构，需要用的数学上的算法，然后这棵树在跳舞时(摆动)，树枝上下摆动和左右摇晃的节奏并不同步，带有一种自然的随意和协调性。看起来很美。

CSS3动画是现代浏览器给Web程序员带来的一种福利。程序员可以利用这些新web技术轻松的实现各种前人想不到效果。在老式浏览器(IE6/7/8)里，这种效果只能用第三方插件实现(falsh，或用复杂的js)。技术的进步给程序员减轻了压力，扩展了空间。

CSS代码

.trunk, .trunk div {
  background: #136086;
  /*border-radius:$w;*/
  width: 100px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  -webkit-animation-name: rot;
          animation-name: rot;
  -webkit-animation-duration: 2.02s;
          animation-duration: 2.02s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: 5px 5px;
      -ms-transform-origin: 5px 5px;
          transform-origin: 5px 5px;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;

}
.trunk.trunk, .trunk div.trunk {
  bottom: 0;
  left: 50%;
  -webkit-animation-name: rot-root;
          animation-name: rot-root;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}
.trunk > div, .trunk div > div {
  /*opacity:0.9;*/
  top: 0;
  left: 100px;
  -webkit-animation-duration: calc(inherit / 2);
          animation-duration: calc(inherit / 2);
  /* don't works :( */
}
.trunk > div:nth-child(2), .trunk div > div:nth-child(2) {
  /*animation-duration:15s;*/
  -webkit-animation-name: rot-inv;
          animation-name: rot-inv;
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
}

@-webkit-keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}

@keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}
@-webkit-keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@-webkit-keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
@keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}

HTML代码：1022个<div>元素

<div class="trunk"><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div></div>