JS实现百度搜索“2012世界末日”网页地震撕裂效果代码

描述了JS模拟百度搜索“2012世界末日”网页地震撕裂效果的代码。分享给大家参考，如下：

这是一个JS模拟百度搜索“2012末日”网页的地震撕裂效果。这个效果是模仿百度输入“2012末日”后用户点击搜索后网页的效果。网页在晃动，像地震一样，然后开始撕裂，然后显示相关的文字描述，很酷。希望大家能从中吸取教训。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-mn-2012-shake-style-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=GB 2312/title 2012年的世界末日/title style type=' text/CSS ' body { font-family : Microsoft yahei }。home-main { background : URL(images/main _ bg.jpg)center 0 no-repeat；宽度： 940 px；高度： 295 px；margin: 0 autopadding: 25px 30px 10px相对位置：color:黑色；font-size : 14px；线高： 30px；左填充left: 80px边距-top: 100px}。家庭主频道。grass { display:块；宽度： 89px；高度： 149像素；background : URL(images/grass . png)0 0不重复；绝对位置：left :-17px；top: 30px}.家庭主频道。t { font-size : 18px；display : block }/style/headsdydiv id=' out ' div class=' home-main ' span class=' grass '/span span class=' t '地球日地球美丽生命百科全书/span过去的地球：这里曾经有许多独特而神奇的生命，霸王龙，剑齿虎.他们逐渐被地球淘汰，消失了。br/然而，曾经有很多美好的生活，比如渡渡鸟和恐鸟，因为人类的行为而消失了。br/我们也在努力寻找白暨豚和华南虎，但它们都不见了.br/现在的地球：这里依然有美丽而聪明的生命，它们多彩而独特，它们顽强而脆弱。br/熊猫、扬子鳄、考拉、鸭嘴兽、眼镜猴、懒猴、羊驼、虎鲸……因为它们与我们共存，所以我们并不孤单！br/未来地球：它的命运掌握在你我手中。沙漠化、温室效应、白色污染、过度放牧、空气污染、水污染……不要让生命因为这些而消失。让地球上只有人类独自生活！/div/div脚本类型=' text/JavaScript ' src=' http :2012 . js '/script/body/html。希望本文对JavaScript编程有所帮助。