纯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>
