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);
            transform: translateY(18px);
        }
    }
    
    @keyframes waves{
        50%{
            -webkit-transform: translateY(18px);
            transform: translateY(18px);
        }
    }
    
    @-webkit-keyframes bubble_s{
        40%{
            opacity: 0;
        }
    }
    
    @keyframes bubble_s{
        40%{
            opacity: 0;
        }
    }
    @-webkit-keyframes bubble_m{
        60%{
            opacity: 0;
        }
    }
    @keyframes bubble_m{
        60%{
            opacity: 0;
        }
    }
    @-webkit-keyframes bubble_l{
        100%{
            opacity: 0;
        }
    }
    @keyframes bubble_l{
        100%{
            opacity: 0;
        }
    }
    
    @-webkit-keyframes lights{
        50%{
            fill: white;
            -webkit-transition: fill ease-in-out .5s;
            transition: fill ease-in-out .5s;
        }
    }
    
    @keyframes lights{
        50%{
            fill: white;
            -webkit-transition: fill ease-in-out .5s;
            transition: fill ease-in-out .5s;
        }
    }
    
    
    /*************************************/
    /****-  5. MEDIA QUERIES      -******/
    /***********************************/
    
    @media (max-width: 1200px){
        .submarine_bg_ie{
        width: 500px;
        margin-right: 33%;
        }
     
    }
    
    @media (max-width: 800px){
        .submarine_bg_ie{
        width: 260px;
        margin: 0 auto;
        }
        .error h1{
            font-size: 2em;
        }
        .navigation{
            top: 160px;
        }
     
    }
    
    @media (max-width: 480px){
         .error h1{
            font-size: 1.8em;
        }
        .error p{
            font-size: 0.8em;
        }
        .navigation{
            top: 150px;
        }
    }
    
    
    /*************************************/
    /****-  6. LOADING CSS      ---******/
    /***********************************/
    
    .spinner {
      margin: 300px auto 0;
      width: 70px;
      text-align: center;
      display: none;
    }
    
    .spinner > div {
      width: 18px;
      height: 18px;
      background-color: #f0f0f0;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    
    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    
    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
    
    @keyframes bouncedelay {
      0%, 80%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
    </style>

</head>

<body>
    <!-- Page Loader    -->
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
    <!-- Page Loader en.........完整代码请登录后点击上方下载按钮下载查看