div+css实现宇航员404页面代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现宇航员404页面代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
* {
        box-sizing:border-box
}
body {
        width:100vw;
        height:100vh;
        overflow:hidden;
        font-size:12px;
        background-image:linear-gradient(to right bottom,#a9347e,#4b32a7);
        font-family:'Open Sans',sans-serif;
        letter-spacing:.2px;
        color:#fff
}
.inspiration {
        position:fixed;
        bottom:0;
        right:0;
        padding:10px;
        text-align:center;
        text-decoration:none;
        font-family:'Gill Sans',sans-serif;
        font-size:14px;
        color:#ff487f
}
.center {
        position:relative;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        transition:transform .5s;
        z-index:1
}
@media screen and (max-height:600px) {
        .center {
        transform:translate(-50%,-50%) scale(0.75)
}
}@media screen and (max-width:400px) {
        .center {
        transform:translate(-50%,-50%) scale(0.6)
}
}.star {
        position:absolute;
        z-index:1
}
.star:nth-child(1) {
        top:30vh;
        left:15vw
}
.star:nth-child(1):before,.star:nth-child(1):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-1s;
        animation-delay:-1s
}
.star:nth-child(1):before {
        top:.5px;
        left:-0.5px;
        width:3px;
        height:1px
}
.star:nth-child(1):after {
        top:-0.5px;
        left:.5px;
        width:1px;
        height:3px
}
.star:nth-child(2) {
        top:88vh;
        left:19vw
}
.star:nth-child(2):before,.star:nth-child(2):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-2s;
        animation-delay:-2s
}
.star:nth-child(2):before {
        top:1px;
        left:-1px;
        width:6px;
        height:2px
}
.star:nth-child(2):after {
        top:-1px;
        left:1px;
        width:2px;
        height:6px
}
.star:nth-child(3) {
        top:4vh;
        left:29vw
}
.star:nth-child(3):before,.star:nth-child(3):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-3s;
        animation-delay:-3s
}
.star:nth-child(3):before {
        top:.5px;
        left:-0.5px;
        width:3px;
        height:1px
}
.star:nth-child(3):after {
        top:-0.5px;
        left:.5px;
        width:1px;
        height:3px
}
.star:nth-child(4) {
        top:12vh;
        left:89vw
}
.star:nth-child(4):before,.star:nth-child(4):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-4s;
        animation-delay:-4s
}
.star:nth-child(4):before {
        top:2px;
        left:-2px;
        width:12px;
        height:4px
}
.star:nth-child(4):after {
        top:-2px;
        left:2px;
        width:4px;
        height:12px
}
.star:nth-child(5) {
        top:11vh;
        left:86vw
}
.star:nth-child(5):before,.star:nth-child(5):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-5s;
        animation-delay:-5s
}
.star:nth-child(5):before {
        top:1px;
        left:-1px;
        width:6px;
        height:2px
}
.star:nth-child(5):after {
        top:-1px;
        left:1px;
        width:2px;
        height:6px
}
.star:nth-child(6) {
        top:13vh;
        left:23vw
}
.star:nth-child(6):before,.star:nth-child(6):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-6s;
        animation-delay:-6s
}
.star:nth-child(6):before {
        top:1px;
        left:-1px;
        width:6px;
        height:2px
}
.star:nth-child(6):after {
        top:-1px;
        left:1px;
        width:2px;
        height:6px
}
.star:nth-child(7) {
        top:30vh;
        left:58vw
}
.star:nth-child(7):before,.star:nth-child(7):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-7s;
        animation-delay:-7s
}
.star:nth-child(7):before {
        top:1px;
        left:-1px;
        width:6px;
        height:2px
}
.star:nth-child(7):after {
        top:-1px;
        left:1px;
        width:2px;
        height:6px
}
.star:nth-child(8) {
        top:98vh;
        left:26vw
}
.star:nth-child(8):before,.star:nth-child(8):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-8s;
        animation-delay:-8s
}
.star:nth-child(8):before {
        top:.5px;
        left:-0.5px;
        width:3px;
        height:1px
}
.star:nth-child(8):after {
        top:-0.5px;
        left:.5px;
        width:1px;
        height:3px
}
.star:nth-child(9) {
        top:64vh;
        left:61vw
}
.star:nth-child(9):before,.star:nth-child(9):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-9s;
        animation-delay:-9s
}
.star:nth-child(9):before {
        top:2px;
        left:-2px;
        width:12px;
        height:4px
}
.star:nth-child(9):after {
        top:-2px;
        left:2px;
        width:4px;
        height:12px
}
.star:nth-child(10) {
        top:5vh;
        left:20vw
}
.star:nth-child(10):before,.star:nth-child(10):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-10s;
        animation-delay:-10s
}
.star:nth-child(10):before {
        top:1px;
        left:-1px;
        width:6px;
        height:2px
}
.star:nth-child(10):after {
        top:-1px;
        left:1px;
        width:2px;
        height:6px
}
.star:nth-child(11) {
        top:74vh;
        left:39vw
}
.star:nth-child(11):before,.star:nth-child(11):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-11s;
        animation-delay:-11s
}
.star:nth-child(11):before {
        top:2px;
        left:-2px;
        width:12px;
        height:4px
}
.star:nth-child(11):after {
        top:-2px;
        left:2px;
        width:4px;
        height:12px
}
.star:nth-child(12) {
        top:68vh;
        left:39vw
}
.star:nth-child(12):before,.star:nth-child(12):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-12s;
        animation-delay:-12s
}
.star:nth-child(12):before {
        top:2px;
        left:-2px;
        width:12px;
        height:4px
}
.star:nth-child(12):after {
        top:-2px;
        left:2px;
        width:4px;
        height:12px
}
.star:nth-child(13) {
        top:39vh;
        left:62vw
}
.star:nth-child(13):before,.star:nth-child(13):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-13s;
        animation-delay:-13s
}
.star:nth-child(13):before {
        top:.5px;
        left:-0.5px;
        width:3px;
        height:1px
}
.star:nth-child(13):after {
        top:-0.5px;
        left:.5px;
        width:1px;
        height:3px
}
.star:nth-child(14) {
        top:51vh;
        left:47vw
}
.star:nth-child(14):before,.star:nth-child(14):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-14s;
        animation-delay:-14s
}
.star:nth-child(14):before {
        top:1.5px;
        left:-1.5px;
        width:9px;
        height:3px
}
.star:nth-child(14):after {
        top:-1.5px;
        left:1.5px;
        width:3px;
        height:9px
}
.star:nth-child(15) {
        top:86vh;
        left:78vw
}
.star:nth-child(15):before,.star:nth-child(15):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-15s;
        animation-delay:-15s
}
.star:nth-child(15):before {
        top:2px;
        left:-2px;
        width:12px;
        height:4px
}
.star:nth-child(15):after {
        top:-2px;
        left:2px;
        width:4px;
        height:12px
}
.star:nth-child(16) {
        top:88vh;
        left:56vw
}
.star:nth-child(16):before,.star:nth-child(16):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-16s;
        animation-delay:-16s
}
.star:nth-child(16):before {
        top:.5px;
        left:-0.5px;
        width:3px;
        height:1px
}
.star:nth-child(16):after {
        top:-0.5px;
        left:.5px;
        width:1px;
        height:3px
}
.star:nth-child(17) {
        top:82vh;
        left:32vw
}
.star:nth-child(17):before,.star:nth-child(17):after {
        position:absolute;
        content:'';
        background-color:#fff;
        border-radius:10px;
        -webkit-animation:blink 1.5s infinite;
        animation:blink 1.5s infinite;
        -webkit-animation-delay:-17s;
        animation-delay:-17s
}
.star:nth-child(17):before {
        top:1.5px;
        left:-1.5px;
        width:9px;
        height:3px
}
.star:nth-child(17):after {
        top:-1.5px;
        left:1.5px;
        width:3px;
        height:9px
}
.star:nth-child(18) {
        top:89vh;
        left:62vw
}
.star:nth-child(18):before,.star:nth-child(18):after {
        position:absolute;
        content:'&#.........完整代码请登录后点击上方下载按钮下载查看