效果：
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. [SQLServer大对象]——FileTable初体验

    阅读导航 启用FILESTREAM设置 更改FILESTRAM设置 启用数据库非事务性访问级别 FileTable 在我接触FileTable之前,存储文件都是存储文件的链接和扩展名到数据,其实并没有 ...

  2. [stm32] 一个简单的stm32vet6驱动的天马4线SPI-1.77寸LCD彩屏DEMO

    书接上文<1.一个简单的nRF51822驱动的天马4线SPI-1.77寸LCD彩屏DEMO> 我们发现用16MHz晶振的nRF51822驱动1.77寸的spi速度达不到要求 本节主要采用7 ...

  3. Hello Mybatis 03 数据关联

    ResultMap 在实际的开发中,数据库不总是我们希望看到的样子.比如我们希望User的主键是id但是数据库偏偏喜欢叫它u_id,这样一来原先的resultType似乎就失效了,不带这么玩的,整个人 ...

  4. IOS 多线程05-OperationQueue 、GCD详解

      注:本人是翻译过来,并且加上本人的一点见解. 1. 开始 目前在 iOS中有两套先进的同步 API 可供我们使用:操作队列OperationQueue和 GCD .其中 GCD 是基于 C 的底层 ...

  5. 给UINavigationBar自定义颜色

    self.navigationController.navigationBar.barTintColor = RGB(55, 46, 41);    

  6. Java程序员的日常—— POI与JDBC、Mockmvc与单元测试

    周日没怎么休息好,周一一天都迷迷糊糊的,不过还算是干了不少的活. 总结一下,大致有以下几点内容: 1 使用poi以及mysql jdbc实现了一个复杂excel的导入 2 基于工程原有的代码,书写sp ...

  7. Linux初学 - head,tail,grep,sed,yum,find

    head 查看文件头部 -n 指定查看行数 默认10行 tail 查看文件尾部 n 指定查看行数 默认10行 Grep 命令 用法大全 . 参数: -I :忽略大小写 -c :打印匹配的行数 -l : ...

  8. iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  9. 每天一个linux命令（19）：find 命令概览

    Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时 ...

  10. MVC及WebAPI添加Jsonp支持

    Windows Live Writer 有点问题,着色代码看起来不清晰,所以贴的图片,完整代码在最后. 1:MVC实现 大致思路就是实现一个JsonpResult,在ExecuteResult内实现支 ...