纯html5+css能写出什么惊人的效果？

鄙人最近学习css，发现纯html5+css可以实现这般效果：
一棵跳舞的树

 

1 .trunk, .trunk div {  2     background: #136086;  3     /*border-radius:$w;*/  4     width: 100px;  5     height: 10px;  6     position: absolute;  7     left:50%;  8     top:70%;  9     margin-left: -10px; 10     -webkit-animation-name: rot; 11             animation-name: rot; 12     -webkit-animation-duration: 2.02s; 13             animation-duration: 2.02s; 14     -webkit-animation-iteration-count: infinite; 15             animation-iteration-count: infinite; 16     -webkit-animation-direction: alternate; 17             animation-direction: alternate; 18     -webkit-transform-origin: 5px 5px; 19         -ms-transform-origin: 5px 5px; 20             transform-origin: 5px 5px; 21     -webkit-animation-timing-function: ease-in-out; 22             animation-timing-function: ease-in-out; 23  24 } 25 .trunk.trunk, .trunk div.trunk { 26     bottom: 0; 27     left: 50%; 28     -webkit-animation-name: rot-root; 29             animation-name: rot-root; 30     -webkit-animation-duration: 2.5s; 31             animation-duration: 2.5s; 32 } 33 .trunk > div, .trunk div > div { 34     /*opacity:0.9;*/ 35     top: 0; 36     left: 100px; 37     -webkit-animation-duration: calc(inherit / 2); 38             animation-duration: calc(inherit / 2); 39     /* don't works  */ 40 } 41 .trunk > div:nth-child(2), .trunk div > div:nth-child(2) { 42     /*animation-duration:15s;*/ 43     -webkit-animation-name: rot-inv; 44             animation-name: rot-inv; 45     -webkit-animation-duration: 1.7s; 46             animation-duration: 1.7s; 47 } 48  49 @-webkit-keyframes rot { 50     from { 51       -webkit-transform: rotate(15deg) scale(0.72); 52               transform: rotate(15deg) scale(0.72); 53     } 54     to { 55       -webkit-transform: rotate(45deg) scale(0.72); 56               transform: rotate(45deg) scale(0.72); 57     } 58 } 59  60 @keyframes rot { 61     from { 62       -webkit-transform: rotate(15deg) scale(0.72); 63               transform: rotate(15deg) scale(0.72); 64     } 65     to { 66       -webkit-transform: rotate(45deg) scale(0.72); 67               transform: rotate(45deg) scale(0.72); 68     } 69 } 70 @-webkit-keyframes rot-inv { 71     from { 72       -webkit-transform: rotate(-45deg) scale(0.72); 73               transform: rotate(-45deg) scale(0.72); 74     } 75     to { 76       -webkit-transform: rotate(-15deg) scale(0.72); 77               transform: rotate(-15deg) scale(0.72); 78     } 79 } 80 @keyframes rot-inv { 81     from { 82       -webkit-transform: rotate(-45deg) scale(0.72); 83               transform: rotate(-45deg) scale(0.72); 84     } 85     to { 86       -webkit-transform: rotate(-15deg) scale(0.72); 87               transform: rotate(-15deg) scale(0.72); 88     } 89 } 90 @-webkit-keyframes rot-root { 91     from { 92       -webkit-transform: rotate(-95deg); 93               transform: rotate(-95deg); 94     } 95     to { 96       -webkit-transform: rotate(-85deg); 97               transform: rotate(-85deg); 98     } 99 }100 @keyframes rot-root {101     from {102       -webkit-transform: rotate(-95deg);103               transform: rotate(-95deg);104     }105     to {106       -webkit-transform: rotate(-85deg);107               transform: rotate(-85deg);108     }109 }

 效果:

 本人小站:http://www.zuiuren.com

（是只靠纯html5+css，没有js代码）