效果：
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. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  2. 跟我一起云计算（4）——lucene

    了解lucene的基本概念 这一部分可以参考我以前写的博客: http://www.cnblogs.com/skyme/tag/lucene/ lucene是什么 下图是一个很好的说明: 1.luce ...

  3. 阿里巴巴B2B搜索学习

    1.搜索业务 主搜索:商品搜索.商家搜索.采购搜索.app搜索 行业搜索:淘货源.淘工厂.聚好货.主题市场.品牌馆等 2.优势 由于用户多,需求强烈,收益大,所以功能.场景.架构做到极致高效. 代码复 ...

  4. SVNServer迁移

    本文主要记录SVNServer从windows系列迁移到Centos的过程,以下几篇文章已经描述的很好了,本文就不再赘述. 注意问题: 配置权限时空格问题:包括前面不能有空格,=两边有空格等. 参考链 ...

  5. thinkphp里的session、cookie方法

    thinkphp里,对于session和cookie的操作,不管是存值.获取.删除,均只有一个方法.现分享出来,供大家参考参考. /** * session管理函数 * @param string|a ...

  6. maven install 读取jar包时出错；error in opening zip file

    错误信息: [INFO] ------------------------------------------------------------------------ [ERROR] Failed ...

  7. ASP.NET MVC 拦截器IResultFilter

    在ASP.NET MVC中,有一个Result拦截器,实现ResultFilter需要继承一个类(System.Web.Mvc.FilterAttribute)和实现一个类(System.Web.Mv ...

  8. Lock VS Monitor

    Lock Monitor   多线程操作的时候,为防止死锁,我们经常采用加Lock的方式解决,下面就谈一下Lock的具体运用和Lock可以用什么来替换 首先,看代码: private static o ...

  9. 查看SSIS Package 部署的历史记录

    1,通过Integration Services Catalogs来查看 打开SSISDB->Projects,查看指定project的version history,这种方式查看Deploye ...

  10. C#多线程之旅(4)——APM初探

    源码地址:https://github.com/Jackson0714/Threads 原文地址:C#多线程之旅(4)——APM初探 C#多线程之旅目录: C#多线程之旅(1)——介绍和基本概念 C# ...