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

1、新建html文档。

3、书写css代码。.trunk, .trunk div { background: #136086; w足毂忍珩idth: 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; }

5、代码整体结构。