css布局实现狗狗迷失动画效果的404页面代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现狗狗迷失动画效果的404页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tipsy.css">
<style>
@charset "utf-8";
/* === General stuff === */
html, body {
height: 100%;
background: #186aa9 ;
overflow: hidden;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a {
color: #3680b1;
}
img, a img {
border: 0px none;
outline: none;
}
/* === Preloader === */
#universal-preloader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.96;
background: #000 repeat;
z-index: 999999999;
}
#universal-preloader>.preloader {
width: 24px;
height: 24px;
position: absolute;
top: 50%;
left: 50%;
text-align: center;
}
.universal-preloader-preloader {
position: absolute;
top: 0px;
left: 0px;
}
/* === Main Section === */
#wrapper {
width: 980px;
margin: 0px auto;
position: relative;
height: 100%;
}
h1.not-found-text {
font-size: 50px;
color: #fff;
letter-spacing: 2px;
margin-bottom: 20px;
}
div.not-found-text {
position: absolute;
top: 35px;
right: 0px;
width: 430px;
}
div.graphic {
position: absolute;
top: 80px;
left: 0px;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82eeee0ad.png) top left no-repeat;
width: 494px;
height: 331px;
}
div.planet {
position: absolute;
bottom: -1100px;
margin: 0px auto;
width: 980px;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82ba1a9c8.png) center no-repeat;
height: 1920px;
z-index: 0;
}
div.dog-wrapper {
position: absolute;
bottom: 300px;
left: 440px;
}
div.dog {
position: absolute;
bottom: 0px;
left: 0px;
width: 80px;
height: 80px;
z-index: 999;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82a1e81a4.png) 0px 0px no-repeat;
}
div.search {
position: absolute;
top: 145px;
right: 0px;
width: 340px;
background: #eeeeee;
box-shadow: 1px 1px 0 #ffffff inset, 5px 5px 0px #3680b1;
color: #555555;
font-size: 14px;
text-shadow: 1px 1px 0 #ffffff;
border-radius: 30px;
padding: 10px;
z-index: 999;
}
div.search input[type=submit]:hover {
background: #ffffff url(//repo.bfw.wiki/bfwrepo/icon/5dbedab8b0577.png) center center no-repeat;
cursor: pointer;
}
div.search input[type=submit] {
box-shadow: 1px 1px 0 #ffffff inset, 5px 5px 0px #3680b1;
background: #eeeeee url(//repo.bfw.wiki/bfwrepo/icon/5dbedab8b0577.png) center center no-repeat;
border-radius: 50px;
position: absolute;
top: 0px;
right: 380px;
width: 50px;
height: 40px;
border: none;
}
div.search input[type=text] {
padding: 0px 10px;
border: 0px none;
background: none;
color: #999999;
width: 300px;
height: 20px;
}
div.top-menu {
position: absolute;
top: 200px;
right: 0px;
color: #ffffff;
z-index: 998;
}
div.top-menu a {
text-decoration: none;
color: #eeeeee;
margin: 0px 5px;
font-size: 12px;
}
div.top-menu a:hover {
color: #abd7fa;
}
div.dog-bubble {
font-size: 14px;
line-height: 1.5;
font-style: italic;
height: 179px;
width: 246px;
background: url(//repo.bfw.wiki/bfwrepo/image/610a82dcdf68a.png) top center no-repeat;
padding: 20px 0px;
position: absolute;
bottom: 0px;
left: 30px;
z-index: 999;
opacity: 0;
color: #555555;
font-size: 14px;
text-shadow: 1px 1px 0 #ffffff;
}
div.dog-bubble>p {
text-align: center;
padding: 0px 35px;
}
div.bubble-options {
opacity: 0;
visibility: hidden;
display: none;
}
.tipsy {
padding: 5px;
font-size: 10px;
position: absolute;
z-index: 9999999999;
}
.tipsy-inner {
padding: 5px 8px 4px 8px;
background-color: black;
color: white;
max-width: 200px;
text-align: center;
}
.tipsy-inner {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.tipsy-arrow {
position: absolute;
background: url('//repo.bfw.wiki/bfwrepo/image/610a82a1e81a4.png') no-repeat top left;
width: 9px;
height: 5px;
}
.tipsy-n .tipsy-arrow {
top: 0;
left: 50%;
margin-left: -4px;
}
.tipsy-nw .tipsy-arrow {
top: 0;
left: 10px;
}
.tipsy-ne .tipsy-arrow {
top: 0;
right: 10px;
}
.tipsy-s .tipsy-arrow {
bottom: 0;
left: 50%;
margin-left: -4px;
background-position: bottom left;
}
.tipsy-sw .tipsy-arrow {
bottom: 0;
left: 10px;
background-position: bottom left;
}
.tipsy-se .tipsy-arrow {
bottom: 0;
right: 10px;
background-position: bottom left;
}
.tipsy-e .tipsy-arrow {
top: 50%;
margin-top: -4px;
right: 0;
width: 5px;
height: 9px;
background-position: top right;
}
.tipsy-w .tipsy-arrow {
top: 50%;
margin-top: -4px;
left: 0;
width: 5px;
height: 9px;
}
</style>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript">
// JavaScript Document
//prepare variables
var degree = 0;
var maxtalk = 0;
var talkbubble = 1;
$(document).ready(function() {
//clear input text when clicked
inputTextFix();
//count talk bubbles
$("div.bubble-options p.dog-bubble").each(function() {
maxtalk++;
});
});
//function that implements a input text hotfix; remove if you don't like it
function inputTextFix() {
$("input[type='text'], input[type='password']").each(function() {
//each time a user clicks on a input field
$(this).click(function() {
//save the current value, if any
if ($(this).attr("value") != "") {
$(this).attr("previous_value", $(this).attr("value"));
$(this).attr("value", "");
}
});
//on blur, if left empty, restore the saved value, if any
$(this).blur(function() {
if ($(this).attr("value") == "")
$(this).attr("value", $(this).attr("previous_value"));
});
});
}
//function that handles the universal preloader positioning and alignment
function universalPreloader() {
var pre = $("#universal-preloader>div");
//centering function
jQuery.fn.center = function () {
this.css("position", "absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + "px");
this.css("left", (($(window).wid.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0