效果：http://hovertree.com/texiao/js/26/
请移动鼠标看看效果。
效果图如下：
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <title>并非目不转睛的404网页_何问起</title><base target="_blank" /> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="robots" content="noindex,nofollow" /> <meta name="keywords" content="images, funny pictures, image host, image upload, image sharing, image resize" /> <meta name="description" content="hovertree is home to the web‘s most popular image content, curated in real time by a dedicated community through commenting, voting and sharing." /> <meta name="copyright" content="Copyright 2014 hovertree, Inc." /> <meta http-equiv="X-UA-Compatible" content="IE=Edge;" /> <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/26/css/404.css?1393899213" /> <!--[if IE 9]><link rel="stylesheet" href="http://hovertree.com/texiao/js/26/css/ie-sucks.css?0" type="text/css" /><![endif]--> </head> <body> <div class="nodisplay"> hovertree is home to the web‘s most popular image content, curated in real time by a dedicated community through commenting, voting and sharing. </div> <div id="hallway"> <div class="container"> <div id="cat1" class="painting"> <img src="http://hovertree.com/texiao/js/26/images/cat1weyes.png"> <div class="eye-container"> <div class="eye left"> <div class="pupil"></div> </div> <div class="eye right"> <div class="pupil"></div> </div> </div> </div> <div id="cat2" class="painting"> <img src="http://hovertree.com/texiao/js/26/images/cat2weyes.png"> <div class="eye-container"> <div class="eye"> <div class="pupil"></div> </div> </div> </div> <div id="giraffe" class="painting"> <img src="http://hovertree.com/texiao/js/26/images/giraffeweyes.png"> <div class="eye-container"> <div class="eye left"> <div class="pupil"></div> </div> <div class="eye right"> <div class="pupil"></div> </div> </div> <img class="monocle" src="http://hovertree.com/texiao/js/26/images/monocle.png" /> </div> <div id="cat3" class="painting"> <img src="http://hovertree.com/texiao/js/26/images/cat3weyes.png"> <div class="eye-container"> <div class="eye left"> <div class="pupil"></div> </div> <div class="eye right"> <div class="pupil"></div> </div> </div> </div> <div id="cat4" class="painting"> <img src="http://hovertree.com/texiao/js/26/images/cat4weyes.png"> <div class="eye-container"> <div class="eye left"> <div class="pupil"></div> </div> <div class="eye right"> <div class="pupil"></div> </div> </div> </div> </div> </div> <div class="footer textbox"> <h1>页面呢?! 动物们也都在找</h1> <p>请移动鼠标看看。404：您正在查找的页面不存在，请检查您输入的网址正确。<a href="http://hovertree.com/h/bjaf/js404page.htm">原文</a> <a href="http://hovertree.com/texiao/">特效</a></p> <p>或者点击这里访问何问起首页：<a href="http://hovertree.com">访问首页!</a></p> <a href="http://hovertree.com" class="footer-logo"><img src="http://hovertree.com/themes/hvtimages/hlogo.png"></a> </div> <script type="text/javascript" src="http://hovertree.com/texiao/js/26/js/404.js?1393899213"></script> <script type="text/javascript"> var e404 = E404.getInstance(); e404.generalInit(); </script> <noscript> <div class="nodisplay"> <img src="http://hovertree.com/hvtimg/bjafjc/rgevo2ea_l.jpg" border="0" height="1" width="1" alt="Quantcast" /> </div> </noscript> </body> </html>
转自：http://hovertree.com/h/bjaf/js404page.htm
特效库：http://www.cnblogs.com/roucheng/p/texiao.html
时间： 2024-10-05 15:37:51