HTML5!

Question

晚上没事瞎点发现了个H5的网站，雷到我了，
贴个代码量小的<div class="effect-wrapper">
  
  <div class="layer1">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                          <div>
                                            <div>
                                                <div></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>  <div class="layer2">
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                          <div>
                                            <div>
                                                <div></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div></div>
body {
  background:black;  
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;
}.effect-wrapper {
  position:relative;
  width:400px;
  height:400px;
}.effect-wrapper .layer1,
.effect-wrapper .layer2 {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;
}
    
.effect-wrapper .layer1,
.effect-wrapper .layer1 * {
    background:rgba(0,0,255,.1);
    /*border-radius:10px;*/
} .effect-wrapper .layer2,
.effect-wrapper .layer2 * {
    background:rgba(0,0,0,.1);
    /*border-radius:10px;*/
} .effect-wrapper .layer1 *,
.effect-wrapper .layer2 * {
    display:-webkit-box;
  -webkit-box-pack:center;
  -webkit-box-align:center;
    width:80%;
    height:80%;
} 
/* --------- Animation --------- */
.effect-wrapper .layer1,
.effect-wrapper .layer1 * {
    -webkit-animation-name: spin-clockwise;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.82, 0.24, 0.25, 0.75);
    -webkit-box-shadow:inset 0 0 10px rgba(255,255,255,0.3);
}.effect-wrapper .layer2,
.effect-wrapper .layer2 * {
    -webkit-animation-name: spin-counter-clockwise, pulsate-blue;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.82, 0.24, 0.25, 0.75);
    -webkit-box-shadow:inset 0 0 10px rgba(255,255,255,0.3);
}
/* Animation: Clockwise */
@-webkit-keyframes spin-clockwise {
    0%   { -webkit-transform: rotate(0deg);   }
    100% { -webkit-transform: rotate(360deg); }
}/* Animation: Counter counter clockwise */
@-webkit-keyframes spin-counter-clockwise {
    0%   { -webkit-transform: rotate(0deg);   } 
    100% { -webkit-transform: rotate(-360deg); }
}/* Animation: Counter counter clockwise */
@-webkit-keyframes pulsate-blue {
    0%   { background:rgba(0,0,255,.1);
           -webkit-transform:/* Add Cool stuff here! */; 
    } 
    100% { background:rgba(255,255,255,.1);
           -webkit-transform:/* Add Cool stuff here! */; 
    }
}    

Answer 1

这个是在线demo 点这里
貌似只支持webkit的浏览器，而且硬件要还可以，我在i5的mac上面开了几个demo跑起来有时候还是会卡一下。国外H5的氛围很好，chrome里面有N多的h5游戏，刚开始在公司实习的时候做的是H5的开发，搞了2个月公司就不搞H5了，之后转到移动端的C++去了，离职的一些同事要不就是去大公司继续H5的研究，要不就是去给opera或者ff在中国的公司做一些小游戏，用头的话说就是这两年看不到丝毫希望啊。话说H5跟JS还是没有什么关系的，CSS3的动画应该是H5的一大亮点。
只可惜国内那些IE内核的浏览器害人不浅，用户大多没有升级这个概念，做网站的或许影响不大，做应用的位置就尴尬了，也不知道何时是个头。

Answer 2

html5不错，普及后，以后，用来开发网页游戏方便多了。
不用flash了，flash弱点很多，一是要安装麻烦点，二是安全性较差，三是苹果ios系统也不支持

Answer 3

在漂亮的样式，没有js让它动起来有毛用啊
当然css也是非常重要的

Answer 4

demo里面大多都是纯CSS，很少有用js的，除了一些特别复杂需要计算的，如果逻辑够清楚，用CSS3写出动画来完全不是问题

Answer 5

现在transform有了 有些简单动画用不到JS了 比如楼主的这个

Answer 6

这么说 html5这么强大 ，但是还是没有三维坐标标准啊啊，我看这些歌3D图形全是利用强大的数学计算做成3D的，也就是伪3D嘛