效果：
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. .net 时间戳和日期互转

    1.时间戳转日期 public static DateTime IntToDateTime(int timestamp) {     ,,)).AddSeconds(timestamp); } 调用: ...

  2. No resource found that matches the given name 'android:Widget.Material.A解决方案

    1:首先新建空白工作区 2:先import appcompat_v7 appcompat_v7在一个类似这样的地方, C:\mywork\android\android-sdk-windows\ext ...

  3. 使用反射将DataTable的数据转成实体类

    利用反射避免了硬编码出现的错误,但是实体类的属性名必须和数据库名字对应(相同) 1.利用反射把DataTable的数据写到单个实体类 /// <summary> ///利用反射把DataT ...

  4. html_02之表单、其它

    1.表单属性action:处理表单数据服务器端处理程序地址,默认提交本页: 2.表单属性method:①get:明文,数据显示地址栏,长度<2KB,向服务器请求数据时使用:②post:密文,提交 ...

  5. SoapUI测试WS接口实战

    引文: 本文讨论以下问题: 视频播放功能如何进行压力测试? 进行webservices接口测试时,用LR和soapui哪个工具更好? 1 测试需求 前几天接到一项压力测试的任务:视频播放功能的并发压力 ...

  6. JavaScript 对象的基本知识

    js对象和属性的基本定义 (function(){ $(document).ready(function(){ return "object define"; //创建对象实例 v ...

  7. javascript类型系统——包装对象

    × 目录 [1]定义 [2]生存期 [3]显式创建[4]转型函数[5]比较运算 前面的话 javascript对象是一种复合值,它是属性或已命名值的集合.通过'.'符号来引用属性值.当属性值是一个函数 ...

  8. Android开发之登录验证

    最近在做一个小项目,项目开发中需要实现一个登录验证功能,具体的要求就是,在Android端输入用户名和密码,在服务器端验证MySQL数据库中是否有此用户,实现之前当然首要的是,如何使Android端的 ...

  9. 重置Oracle密码

    在系统运行中输入: sqlplus /nolog 在命令窗口分别执行: conn /as sysdba alter user scott identified by tiger; alter user ...

  10. cglib源码分析--转

    原文地址:http://www.iteye.com/topic/799827 背景 前段时间在工作中,包括一些代码阅读过程中,spring aop经常性的会看到cglib中的相关内容,包括BeanCo ...