HTML5!解决思路

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! */; 
    }
} 
 

    

[解决办法]
在漂亮的样式，没有js让它动起来有毛用啊
当然css也是非常重要的
[解决办法]
H5做出来的东西，效果真心不错
[解决办法]

引用:

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

现在transform有了 有些简单动画用不到JS了 比如楼主的这个
[解决办法]
不错阿  以后多发点类似 站点
[解决办法]
这么说 html5这么强大 ，但是还是没有三维坐标标准啊啊，我看这些歌3D图形全是利用强大的数学计算做成3D的，也就是伪3D嘛

查看更多 下一篇