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

代码语言：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: 700px;
        margin-left: 35%;
        padding-top: 120px;
        overflow: hidden;
    }
    
    .submarine_waves_ie{
        position: absolute;
        bottom: -20px;
    }
    .submarine_bg_ie img{
         -ms-interpolation-mode: bicubic;
        interpolation-mode: bicubic;
    }
    
    /***********************************/
    /****- 3. ANIMATED ELEMENTS -******/
    /*********************************/
    
    
    /*---- 3. a. WATER WAVES ----*/
    
    #wave_top{
        -webkit-animation: waves 3s linear infinite;
        animation: waves 3s linear infinite;  
    }
    #wave_bottom{
        -webkit-animation: waves 6s linear infinite;
        animation: waves 6s linear infinite;  
    }
    
    /*---- 3. b. SUBMARINE ----*/
    
    #Submarine{
        
        -webkit-animation: submarine 4000ms linear infinite;
        
        animation: submarine 4000ms linear infinite;
    }
    
    /*---- 3. c. SUBMARINE FAN ----*/
    
    #fan{
        -webkit-animation: spin 900ms linear infinite;
        animation: spin 900ms linear infinite;
        -webkit-transform-origin: 34px 34px;
        -ms-transform-origin: 34px 34px;
        transform-origin: 34px 34px;
    }
    
    /*---- 3. d. SUBMARINE HEAD LIGHT ----*/
    
    #head_light{
        -webkit-transform-origin: 500px 200px;
        -ms-transform-origin: 500px 200px;
        transform-origin: 500px 200px;
        -webkit-animation: headlight 4000ms linear infinite;
        animation: headlight 4000ms linear infinite;
    }
    
    .lights{
       -webkit-animation: lights 2s ease-in infinite;
       animation: lights 2s ease-in infinite; 
    }
    
    /*---- 3. e. BUBBLES ----*/
    
    #bubble_small{
        -webkit-animation: bubble_s 2s linear infinite;
        animation: bubble_s 2s linear infinite;
    }
    #bubble_medium{
        -webkit-animation: bubble_m 2s linear infinite;
        animation: bubble_m 2s linear infinite;
    }
    #bubble_large{
        -webkit-animation: bubble_l 2s linear infinite;
        animation: bubble_l 2s linear infinite;
    }
    
    
    /*don't worry its for IE*/
    .submarine_bg_ie img{
            
        -webkit-animation: submarine 4000ms linear infinite;
        
        animation: submarine 4000ms linear infinite;
    }
    
    /*************************************/
    /****- 4. ANIMATION KEYFRAMES -******/
    /***********************************/
    
    @-webkit-keyframes spin{
        100%{
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin{
        100%{
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @-webkit-keyframes headlight{
        50%{
            -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
        }
    }
    
    @keyframes headlight{
        50%{
            -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
        }
    }
    
    @-webkit-keyframes submarine{
         50%{
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
        }
    }
    
    @keyframes submarine{
         50%{
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
        }
    }
    
    @-webkit-keyframes waves{
        50%{
            -webkit-transform: translateY(18px);
            transfor.........完整代码请登录后点击上方下载按钮下载查看