css机器人星球404页面代码-html代码-BFW代码库

代码语言：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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        @charset "utf-8";
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    a:hover{text-decoration:none;}
    a, button, img, input, spana, button, img, input, span {
      transition: all 0.3s ease 0s;
    }
    .bg_image-errer {
      background: #ffffff;
    }
    
    .section-not-found {
      padding:110px 0;
      overflow: hidden;
    }
    
    .not-found-default {
      overflow: hidden;
    }
    .not-found-default .content {
      position: relative;
      z-index: 2;
    }
    .not-found-default .content h2 {
      color: #333;
      font-size: 30px;
      margin-top: 35px;
      margin-bottom: 43px;
      font-family: "Lato", sans-serif;
    }
    @media only screen and (max-width: 767px) {
      .not-found-default .content h2 {
        font-size: 24px;
      }
    }
    .not-found-default .content a.page-back-btn {
      background: #02a9c0;
      height: 60px;
      display: inline-block;
      padding: 0 40px;
      line-height: 60px;
      border-radius: 30px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      transition: 0.4 ease-in-out;
    }
    .not-found-default .content a.page-back-btn:hover {
      background: #02a9c0;
      border-radius: 20px 0;
      color: #fff;
      transform: translateY(-5px);
    }
    .not-found-default .content a.page-back-btn i {
      padding-right: 12px;
      font-size: 18px;
    }
    
    .cloud {
      width: 350px;
      height: 120px;
      background: #f1f1f1;
      background: linear-gradient(top, #f1f1f1 100%);
      background: -webkit-linear-gradient(top, #f1f1f1 100%);
      background: -moz-linear-gradient(top, #f1f1f1 100%);
      background: -ms-linear-gradient(top, #f1f1f1 100%);
      background: -o-linear-gradient(top, #f1f1f1 100%);
      border-radius: 100px;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      position: absolute;
      margin: 120px auto 20px;
      transition: ease 1s;
    }
    
    .cloud:after,
    .cloud:before {
      content: '';
      position: absolute;
      background: #f1f1f1;
      z-index: -1;
    }
    
    .cloud:after {
      width: 100px;
      height: 100px;
      top: -50px;
      left: 50px;
      border-radius: 100px;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
    }
    
    .cloud:before {
      width: 180px;
      height: 180px;
      top: -90px;
      right: 50px;
      border-radius: 200px;
      -webkit-border-radius: 200px;
      -moz-border-radius: 200px;
    }
    
    .cloud-1 {
      top: -198px;
      left: 0;
      -webkit-transform: scale(0.3);
      -moz-transform: scale(0.3);
      transform: scale(0.3);
      opacity: 0.9;
      -webkit-animation: moveclouds 15s linear infinite;
      -moz-animation: moveclouds 15s linear infinite;
      -o-animation: moveclouds 15s linear infinite;
    }
    
    .cloud-2 {
      top: -122px;
      left: 140px;
      -webkit-transform: scale(0.3);
      -moz-transform: scale(0.3);
      transform: scale(0.3);
      -webkit-animation: moveclouds 17s linear infinite;
      -moz-animation: moveclouds 17s linear infinite;
      -o-animation: moveclouds 17s linear infinite;
    }
    
    .cloud-3 {
      left: 409px;
      top: -50px;
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.6;
      -webkit-animation: moveclouds 25s linear infinite;
      -moz-animation: moveclouds 25s linear infinite;
      -o-animation: moveclouds 25s linear infinite;
    }
    
    .cloud-4 {
      left: -46px;
      bottom: 135px;
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      transform: scale(0.6);
      opacity: 0.8;
      -webkit-animation: moveclouds 25s linear infinite;
      -moz-animation: moveclouds 25s linear infinite;
      -o-animation: moveclouds 25s linear infinite;
    }
    
    .cloud-5 {
      left: 469px;
      bottom: -57px;
      -webkit-transform: scale(0.75);
      -moz-transform: scale(0.75);
      transform: scale(0.75);
      opacity: 0.75;
      -webkit-animation: moveclouds 18s linear infinite;
      -moz-animation: moveclouds 18s linear infinite;
      -o-animation: moveclouds 18s linear infinite;
    }
    
    .cloud-6 {
      left: 100%;
      top: 263px;
      -webkit-transform: scale(0.5);
      -moz-transform: scale(0.5);
      transform: scale(0.5);
      opacity: 0.8;
      -webkit-animation: moveclouds 20s linear infinite;
      -moz-animation: moveclouds 20s linear infinite;
      -o-animation: moveclouds 20s linear infinite;
    }
    
    @-webkit-keyframes moveclouds {
      0% {
        margin-left: 1000px;
      }
      100% {
        margin-left: -1000px;
      }
    }
    @-moz-keyframes moveclouds {
      0% {
        margin-left: 1000px;
      }
      100% {
        margin-left: -1000px;
      }
    }
    @-o-keyframes moveclouds {
      0% {
        margin-left: 1000px;
      }
      100% {
        margin-left: -1000px;
      }
    }
    </style>

</head>

<body>

    <!-- Start 404 Area -->
    <div class="section-not-found">
        <div class="not-found-page-wrapper bg_image-errer text-center">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ht-not-found not-found-default">
                            <div class="content">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAGsCAYAAADDvZ3KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMWUzNTdlMC00MWU4LTg2NDMtYjllMi1hMDBmNjM3MWFmOTUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTBCNTZEOUZCN0RDMTFFOEFDMkNGQTFDNTdEN0E1OUMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTBCNTZEOUVCN0RDMTFFOEFDMkNGQTFDNTdEN0E1OUMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTc5NDAxODctOGRlNS1kZTQ3LWI1NjQtMDQ4NzE1OTJmOGMyIiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDYzZTRmOWUtMDQ0Ny02YTRhLTk5ODktYzNlNjJjODdkZjlhIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+KWkbVQAA+GhJREFUeNrsXQegI1XVPpOevN62d3aXXToLS1+KgIpIEYRVQUVUrOCKCij8iA0FFFdE6U2WsoCAAgrSWfqy7MKyvffy+nt56cn850x5meSlTJJJMsk7H5ydSV4ymblz59zvnnYFURRBEARgMKoF4ry5R+HmYZRnUa4U5i/0c6tU9f2ejJv7UXwoF+P93sWtkrXN9sPNX1BOUd76D8pPsO1WV9E12vF6wny3K/b+nYmb5/EehgbfQ76S+KHkNxiM6uj8s1As3BIFteF3K+hcJ6G08l3Lud3+jfIotwTDZP2yFmU3yuXJfEUrAltgGAxGCgVyJW5+j/I3nAFdyi1Stfd5Bm5CeI83cmswTNInaeJ5EwqRly6UWdg/t6gERgsbNxeDwUiBP6McgfILborqRTW5jBhVQV7IpXkjyqHKW80oq/H9+bi9AaWHCQyDwcg2sIVQaZyH2xi3Rp7KeMEcmklORzlMkSNR3hIuXHQFtw6DMYS80PMyEWVk0p9cyvsNyQSGXUgMBoNhDGGZpiErJLNRamVNizrWbUdVbF8ufO75g7i1GIy0RMaNm7tRvoIygPIpnEi9L/0tyYXEBIbBKP+sgzKlfs+tUVFkZQLIFhUtYWmStSrNGZGs1DgBPA5Z3CgW/EN/YL1wxBPTuAUZjIx6kQLyN6D8BXXjtYPvcwwMg2EqfB/lenxg38IH9Q1uDlOSlbEQdwGpZCWe8SSRFSIqGsJiSTMpjMaWcosyGJmBurADdeJPcDdjhhxbYBiM8swwcLSDh1DOVd6iWJMb8cH9ObdOWcnKKEiMWaFt3Cff4AJo8QDUIkmh6hTuDGQlFbp93xaOefJubmkGI4/nky0wDIYpZhhBJDHzcBdHQzgN5TaQ05YZpSMrbZDoAiLCMmbwA/VIVprduCXLih3AYZHdQwQiL/Y8ftTjeIZbnsEwSI+yBYbBKOMgOm/uCNzQoHYskpoIt0jRyEojyEG1WsIyefADDpzLtdUAtCBh8eC+wxonK8kgW5kvj5OIRIPCgY+4+G4wGHk+xxzEy2CYjsTUInnxcksYRlbqcDML5Do2KlmZOvgBu1WOU9EG2Tqtsi1MD3wKickV/vAGYdbCqXyHGAxjCAy7kBiMMoPJS0FkpQY3h6AcriEsVHtFnpXZVLKiISxEYJLh1PmDoTzJCyEaW8Z3jMEwDkxgGAxGpZAVqg9xsEJSVMJCpfDlNa9sFsWi4lSyghyyaygbKJbFquMEYgqByVvbWl7ku8hgMIFhMBjVTVYcGrKiEpYDB6mG1RJ3/6gpzM481BlRH4fOzwYKvCiX/VW+swwGExgGo7IH6FUXktPiyying1wmO4pC69L8E+U5YeaCYbNMPJIV0kP7Q2LMykGD1MKOLKOlFqDJhYTDIrMOl92YH6e7oCcEsBDXkXSRYhQEYT33fAbDOHAQL0O/Dp4318aZMoaQl+Nws0AhLqlAZbPnIonZXIVkhSwo5PbRxqyQpUXOziE3ULNHTl+mWisu/LhV0U9E6XzK1gjYQV/sS75ZRwkEKLJVOPjRidz7GYxC5gGchcTIj7xQJ7kT5VYkMR9xi+RNXk7Azf/Agf+pRoSIZhsd/OgelCORxGypYLKiXcxQJSwUcCvn+5AbiNKWG1HqiKzYkMBk0EUBTVsVPHVTzkKP6ss360iLYORfwiGPns1PAINhHIFhFxJDL6.........完整代码请登录后点击上方下载按钮下载查看