css实现海底潜艇404错误动画页面代码-html代码-BFW代码库

css实现海底潜艇404错误动画页面代码

代码语言：html

代码描述：css实现海底潜艇404错误动画页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>404 Page not found</title>

    <!--  Stylesheets   -->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,900' rel='stylesheet' type='text/css'>
    <style>
        /*********************************/
    /* Author  : Cavethemes
    /* Contact : cavethemes@gmail.com
    ---------------------------------
    ----- CONTENTS
    ---------------------------------
        | 1. CSS RESET
        | 2. BASIC CSS
        | 3. ANIMATED ELEMENTS
        |    a. WATER WAVES
        |    b. SUBMARINE
        |    c. SUBMARINE FAN
        |    d. SUBMARINE HEAD LIGHT
        |    e. BUBBLES
        | 4. ANIMATION KEYFRAMES
        | 5. MEDIA QUERIES
        | 6. LOADING CSS
        |
    ----------------------------------
    /*********************************/
    
    
    /***************************/
    /****- 1. CSS RESET -******/
    /*************************/
    
    *{
        margin: 0;
        padding: 0;
        border: 0;
        box-sizing: 0;
    }
    
    /***************************/
    /****- 2. BASIC CSS -******/
    /*************************/
    
    body{
        background: #617492;
        overflow: hidden;
    }
    
    
    .error{
        padding: 0px;
        margin-top: 60px;
        z-index: 9999;
    }
    .error h1{
        font-family: 'Open Sans', sans-serif;
        color: #8699b7;
        text-align: center;
        font-weight: 900;
        font-size: 3em;
        opacity: 1;
    }
    .error p{
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        color: #8699b7;
        padding: 15px;
    }
    #submarine_container{
        position: absolute; 
        height: 100%; 
        width: 100%; 
        left: 0; 
        top: 0;
        fill:red;
       
    }
    #waves{
      position: absolute;
      width: 100%;
      bottom: 0;
    
    }
    
    #canvas{
        -webkit-transform: translate(400px,260px);
        -ms-transform: translate(400px,260px);
        transform: translate(400px,260px);
    
    }
    
    #bubble_group{
        -webkit-transform: translate(-450px,-150px);
        -ms-transform: translate(-450px,-150px);
        transform: translate(-450px,-150px);
    }
    
    #svg_container{
        z-index: -1;
    }
    
    /* Navigation */
    
    .navigation{
        width: 100%;
        height: 60px;
        z-index: 9999;
        position: absolute;
        top: 185px;
    }
    .navigation ul{
        list-style: none;
        width: 260px;
        margin: 0 auto;
        border-radius: 0 0 5px 5px;
        padding: 4px;
        border-radius: 10px;
        background: #5a6c89;
    }
    .navigation ul li{
        display: inline;
        
    }
    .navigation ul li a{
        display: inline-block;
        text-decoration: none;
        color: #8699b7;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
        padding: 5px 10px 5px 10px;
        text-align: center;
    }
    .navigation ul li a:hover{
        box-shadow: 0 0 1px rgba(0,0,0,0.1) inset;
        transition: background linear .5s;
        border-radius: 10px;
        background: #526583;
    }
    
    
    /*only for IE*/
    .submarine_bg_ie{
        width: 7.........完整代码请登录后点击上方下载按钮下载查看