动画舞蹈html5,纯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个

元素