<html>
<head>
<title>new document </title>
<meta charset="utf-8">
<style>
@-webkit-keyframes change{
0%{
transform:rotatez(-20deg) rotatey(20deg)
}
50%{
transform:rotatez(-20deg) rotatey(170deg)
}
100%{
transform:rotatez(-20deg) rotatey(360deg)
}
}
body{
perspective:1200px
}
div{
transform-style:preserve-3d
width:800px
height:600px
transform:rotatez(-20deg) rotatey(20deg)
position:relative
transform-origin:500px 300px 0px
-webkit-animation:change 2s linear infinite
}
div:hover{
}
span{
display:block
width:400px
height:400px
border:2px solid blue
border-radius:50%
position:absolute
top:100px
left:300px
}
#s1{
transform:rotatey(0deg) translatez(0px)
}
#s2{
transform:rotatey(30deg) translatez(0px)
}
#s3{
transform:rotatey(60deg) translatez(0px)
}
#s4{
transform:rotatey(90deg) translatez(0px)
}
#s5{
transform:rotatey(120deg) translatez(0px)
}
#s6{
transform:rotatey(150deg) translatez(0px)
}
#s7{
transform:rotatey(180deg) translatez(0px)
}
#s8{
transform:rotatey(210deg) translatez(0px)
}
#s9{
transform:rotatey(240deg) translatez(0px)
}
#s10{
transform:rotatey(270deg) translatez(0px)
}
#s11{
transform:rotatey(300deg) translatez(0px)
}
#s12{
transform:rotatey(330deg) translatez(0px)
}
#d1{
transform:rotatex(0deg) translatez(0px)
}
#d2{
transform:rotatex(30deg) translatez(0px)
}
#d3{
transform:rotatex(60deg) translatez(0px)
}
#d4{
transform:rotatex(90deg) translatez(0px)
}
#d5{
transform:rotatex(120deg) translatez(0px)
}
#d6{
transform:rotatex(150deg) translatez(0px)
}
#d7{
transform:rotatex(180deg) translatez(0px)
}
#d8{
transform:rotatex(210deg) translatez(0px)
}
#d9{
transform:rotatex(240deg) translatez(0px)
}
#d10{
transform:rotatex(270deg) translatez(0px)
}
#d11{
transform:rotatex(300deg) translatez(0px)
}
#d12{
transform:rotatex(330deg) translatez(0px)
}
p{
width:2px
height:505px
position:absolute
top:46px
left:500px
border:2px solid red
border-radius:3px
}
</style>
</head>
<body>
<div>
<p></p>
<span id="s1"></span>
<span id="s2"></span>
<span id="s3"></span>
<span id="s4"></span>
<span id="s5"></span>
<span id="s6"></span>
<span id="s7"></span>
<span id="s8"></span>
<span id="s9"></span>
<span id="s10"></span>
<span id="s11"></span>
<span id="s12"></span>
<span id="d1"></span>
<span id="d2"></span>
<span id="d3"></span>
<span id="d4"></span>
<span id="d5"></span>
<span id="d6"></span>
<span id="d7"></span>
<span id="d8"></span>
<span id="d9"></span>
<span id="d10"></span>
<span id="d11"></span>
<span id="d12"></span>
</div>
</body>
</html>
首先这个效果，是纯JS打造，没用Flash。这让我大呼JS强大。仔细研究下，发现不是很难。首先运用了HTML5+CSS3。其次，下载所有图片，你会恍然大悟，其中包含裂缝的各个状态，右上角火山，裂缝阴影，船票等都在其中，这里已经很明显了，使用JS，轮询控制每张图片出现的时间，位置和长度,这样就可以达到动画效果(我知道这是废话)，至于代码怎么也，你完全可以去看他调用的JS，记住，脚本语言没有编译过，只要你想找，都可以找到。
第三，关于屏幕抖动，你百度这个效果吧！
