css布局实现狗狗迷失动画效果的404页面代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现狗狗迷失动画效果的404页面代码

代码标签: 狗狗 迷失 动画 效果 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;
    .........完整代码请登录后点击上方下载按钮下载查看

网友评论0