HTML5+CSS3实现树被风吹动摇晃

1、新建html文档。

2、书写hmtl代码。<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>

3、书写css代码。

.trunk, .trunk div { background: #136086; width: 100px; height: 10px; position: absolute; left: 50%; top: 70%; 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; }

4、书写css百分比代码。

 @-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); }

}

5、代码整体结构。

6、查看效果。