css布局实现飞碟宇宙飞船宇航员太空404页面错误代码-html代码-BFW代码库

css布局实现飞碟宇宙飞船宇航员太空404页面错误代码

代码语言：html

代码描述：css布局实现飞碟宇宙飞船宇航员太空404页面错误代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");
    @keyframes floating {
      from {
        transform: translateY(0px);
      }
      65% {
        transform: translateY(15px);
      }
      to {
        transform: translateY(0px);
      }
    }
    html {
      height: 100%;
    }
    
    body {
      background-image: url("//repo.bfw.wiki/bfwrepo/images/404/1/star.svg"), linear-gradient(to bottom, #05007A, #4D007D);
      height: 100%;
      margin: 0;
      background-attachment: fixed;
      overflow: hidden;
    }
    
    .mars {
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      height: 27vmin;
      background: url("//repo.bfw.wiki/bfwrepo/images/404/1/mars.svg") no-repeat bottom center;
      background-size: cover;
    }
    
    .logo-404 {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      top: 16vmin;
      width: 30vmin;
    }
    @media (max-width: 480px) and (min-width: 320px) {
      .logo-404 {
        top: 45vmin;
      }
    }
    
    .meteor {
      position: absolute;
      right: 2vmin;
      top: 16vmin;
    }
    
    .title {
      color: white;
      font-family: "Nunito", sans-serif;
      font-weight: 600;
      text-align: center;
      font-size: 5vmin;
      margin-top: 31vmin;
    }
    @media (max-width: 480px) and (min-width: 320px) {
      .title {
        margin-top: 65vmin;
      }
    }
    
    .subtitle {
      color: white;
      font-family: "Nunito", sans-serif;
      font-weight: 400;
      text-align: center;
      font-size: 3.5vmin;
      margin-top: -1vmin;
    .........完整代码请登录后点击上方下载按钮下载查看