效果：
http://hovertree.com/texiao/jquery/74/

源码下载：
http://hovertree.com/h/bjaf/ko0gcgw5.htm

效果图如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery+CSS3实现404背景动画特效 - 何问起</title><base target="_blank" />

<link href="http://hovertree.com/texiao/jquery/74/css/404.css" rel="stylesheet" type="text/css" />

<script src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

$(function() {

var h = $(window).height();

$('body').height(h);

$('.mianBox').height(h);

centerWindow(".tipInfo");

});

//2.将盒子方法放入这个方，方便法统一调用

function centerWindow(a) {

center(a);

//自适应窗口

$(window).bind('scroll resize',

function() {

center(a);

});

}

//1.居中方法，传入需要剧中的标签

function center(a) {

var wWidth = $(window).width();

var wHeight = $(window).height();

var boxWidth = $(a).width();

var boxHeight = $(a).height();

var scrollTop = $(window).scrollTop();

var scrollLeft = $(window).scrollLeft();

var top = scrollTop + (wHeight - boxHeight) / 2;

var left = scrollLeft + (wWidth - boxWidth) / 2;

$(a).css({

"top": top,

"left": left

});

}

</script>

</head>

<body>

<div class="mianBox">

<img src="http://hovertree.com/texiao/jquery/74/images/yun0.png" alt="" class="yun yun0" />

<img src="http://hovertree.com/texiao/jquery/74/images/yun1.png" alt="" class="yun yun1" />

<img src="http://hovertree.com/texiao/jquery/74/images/yun2.png" alt="" class="yun yun2" />

<img src="http://hovertree.com/texiao/jquery/74/images/bird.png" alt="鸟" class="bird" />

<img src="http://hovertree.com/texiao/jquery/74/images/san.png" alt="何问起" class="san" />

<div class="tipInfo">

<div class="in">

<div class="textThis">

<h2>页面不存在</h2>

<p><span>页面将自动<a id="href" href="http://hovertree.com/h/bjaf/tiaosan.htm">跳转</a></span><span>等待<b id="wait">60</b>秒</span></p>

<script type="text/javascript"> (function() {

var wait = document.getElementById('wait'), href = document.getElementById('href').href;

var interval = setInterval(function() {

var time = --wait.innerHTML;

if (time <= 0) {

location.href = href;

clearInterval(interval);

}

;

}, 1000);

})();

</script>

</div>

</div>

</div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/tiaosan.htm">原文</a></p>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/tiaosan.htm

特效汇总：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery+CSS3实现404背景动画特效的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  3. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  4. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  5. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  6. 28种CSS3炫酷载入动画特效

    这是一组效果很炫酷的纯CSS3 Loading载入动画特效.这组loading动画共同拥有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完毕的,每个载入动画都构 ...

  7. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  8. 利用CSS3实现页面淡入动画特效

    利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...

  9. CSS3扁平化Loading动画特效

    效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...

随机推荐

  1. (翻译)正确实施DevOps-The Lay of the Land

    原文地址:http://www.drdobbs.com/architecture-and-design/getting-devops-right-the-lay-of-the-land/2400626 ...

  2. Log4Net指南

    英文好的直接看这里:http://www.codeproject.com/Articles/140911/log4net-Tutorial 介绍 log4net.是.NET下面最伟大的日志工具之一.简 ...

  3. try catch 与 throw拾遗

    今天在微软虚拟学院看到的代码: var b = 0; try{ if (b == 0) { throw('NO NO!!'); } else { alert('OK OK'); }} catch(e) ...

  4. servlet到底是什么？

    Servlet(Server Applet),全称Java Servlet,是用Java编写的服务器端程序.指任何实现了这个Servlet接口的类或者实现Servlet接口的类,当然或者实现接口继承方 ...

  5. 中小公司PMO不一样期间的责任

    中小公司,又称中小型公司或中小企,它是与所在行业的大公司对比在人员规划.财物规划与运营规划上都对比小的经济单位.此类公司一般可由单自个或少数人供给资金构成,其招聘人数与营业额皆不大,因此在运营上多半是 ...

  6. struts2学习笔记之七:Result类型

    一:关于Struts2的type类型,也就是Result类型,他们都实现了共同的接口Result,都实现了execute方法 他们体现了策略模式,具体Result类型参见:struts-default ...

  7. Android开发学习之路-抢红包助手开发全攻略

    背景:新年之际,微信微博支付宝红包是到处飞,但是,自己的手速总是比别人慢一点最后导致红包没抢到,红包助手就应运而生. 需求:收到红包的时候进行提醒,然后跳转到红包的界面方便用户 思路:获取“读取通知信 ...

  8. react4 props 解析

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  9. javaweb回顾第十篇JSTL

    前言:JSTL(JSP Standard Tag Library)JSP标准标签库.它的目的是为了简化JSP的开发,如何没有JSTL可能我们开发的时候就需要写大量的自定义标签,无疑会加大开发难度,有了 ...

  10. Wait Type：IO_COMPLETION

    在等待 CXPACKET 完成的时间内,我查看 sys.dm_exec_requests ,发现Session的 Logical Read/Write, Physical Read 都没有变化.Wai ...