纯html5+css能写出什么惊人的效果？
纯html5+css能写出什么惊人的效果？
鄙人最近学习css，发现纯html5+css可以实现这般效果：
一棵跳舞的树
<!-- 代码部分begin --> <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> <!-- 代码部分end -->
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://down.admin5.com/demo/code_pop/19/1348/
本人小站:http://www.zuiuren.com
（是只靠纯html5+css，没有js代码）
旅游（www.zuiuren.com）儿歌300（www.erge300.com）美食（www.tvlfood.com）临沂（www.0539G.com）房产（www.0539fang.cn）
