效果：
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. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  2. 我心中的核心组件（可插拔的AOP）~调度组件quartz.net

    回到目录 quartz.net是一个任务调度组件,它可以灵活的设置你的调试方式,按时间,按日期,按周期都可以很容易的实现,quartz不仅可以用在web中,而且还可以部署在winform,winser ...

  3. Flume日志采集系统——初体验（Logstash对比版）

    这两天看了一下Flume的开发文档,并且体验了下Flume的使用. 本文就从如下的几个方面讲述下我的使用心得: 初体验--与Logstash的对比 安装部署 启动教程 参数与实例分析 Flume初体验 ...

  4. WinMTR

    一般在windows 来判断网络连通性用ping 和tracert,ping的话可以来判断丢包率,tracert可以用来跟踪路由. 在Linux中有一个好用的网络连通性判断工具,它可以结合ping n ...

  5. C#学习系列-抽象方法与虚拟方法的区别

    参考:http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=9851&m=9838&ct=31054 如 ...

  6. 好友录v1.2.7_Build(7790)

    <好友录>是使用.net Framework4.0+sqlite开发的,属于WingKu(谷毅科技)系列软件之一.它是一款外观时尚.美观,操作简单.易用,功能强大的个人通讯信息管理软件.它 ...

  7. 每天一个linux命令（32）：gzip命令

    减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...

  8. Android 在线SDK更新 和谐被墙解决

    Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list-2.xml, reason: Connect ...

  9. Python中的__new__和__init__

    Python中的__new__和__init__ 写了这么多的class,现在才知道还有个__new__方法, 那么它和__init__有什么区别呢? class TestCls(): "& ...

  10. 让我们一起写出更有效的CSharp代码吧，少年们！

    周末空闲,选读了一下一本很不错的C#语言使用的书,特此记载下便于对项目代码进行重构和优化时查看. Standing On Shoulders of Giants,附上思维导图,其中标记的颜色越深表示在 ...