HTML5!

[奇乐二二二]

晚上没事瞎点发现了个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! */; 
    }
}

    

[奇乐二二二]

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

[网络科技]

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

[Go 旅城通票]

确实nb啊。。。H5有前途。。。

[chen_ya_ping]

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

[奇乐二二二]

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

[风一样的大叔]

H5做出来的东西，效果真心不错

[abcten]

顶一下下呢？

[wbb123yu]

引用 4 楼 chen_ya_ping 的回复:

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

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

[奇乐二二二]

引用 8 楼 wbb123yu 的回复:

引用 4 楼 chen_ya_ping 的回复:在漂亮的样式，没有js让它动起来有毛用啊 当然css也是非常重要的 现在transform有了 有些简单动画用不到JS了 比如楼主的这个

里面有些动画真心不简单

[KK3K2005]

不错阿 以后多发点类似 站点

[klm900308]

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