div+css实现宇航员404页面代码
代码语言：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:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-18s;
animation-delay:-18s
}
.star:nth-child(18):before {
top:1px;
left:-1px;
width:6px;
height:2px
}
.star:nth-child(18):after {
top:-1px;
left:1px;
width:2px;
height:6px
}
.star:nth-child(19) {
top:68vh;
left:99vw
}
.star:nth-child(19):before,.star:nth-child(19):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-19s;
animation-delay:-19s
}
.star:nth-child(19):before {
top:1px;
left:-1px;
width:6px;
height:2px
}
.star:nth-child(19):after {
top:-1px;
left:1px;
width:2px;
height:6px
}
.star:nth-child(20) {
top:68vh;
left:50vw
}
.star:nth-child(20):before,.star:nth-child(20):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-20s;
animation-delay:-20s
}
.star:nth-child(20):before {
top:.5px;
left:-0.5px;
width:3px;
height:1px
}
.star:nth-child(20):after {
top:-0.5px;
left:.5px;
width:1px;
height:3px
}
.star:nth-child(21) {
top:41vh;
left:10vw
}
.star:nth-child(21):before,.star:nth-child(21):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-21s;
animation-delay:-21s
}
.star:nth-child(21):before {
top:2px;
left:-2px;
width:12px;
height:4px
}
.star:nth-child(21):after {
top:-2px;
left:2px;
width:4px;
height:12px
}
.star:nth-child(22) {
top:52vh;
left:16vw
}
.star:nth-child(22):before,.star:nth-child(22):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-22s;
animation-delay:-22s
}
.star:nth-child(22):before {
top:2px;
left:-2px;
width:12px;
height:4px
}
.star:nth-child(22):after {
top:-2px;
left:2px;
width:4px;
height:12px
}
.star:nth-child(23) {
top:88vh;
left:89vw
}
.star:nth-child(23):before,.star:nth-child(23):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-23s;
animation-delay:-23s
}
.star:nth-child(23):before {
top:1px;
left:-1px;
width:6px;
height:2px
}
.star:nth-child(23):after {
top:-1px;
left:1px;
width:2px;
height:6px
}
.star:nth-child(24) {
top:53vh;
left:17vw
}
.star:nth-child(24):before,.star:nth-child(24):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-24s;
animation-delay:-24s
}
.star:nth-child(24):before {
top:1.5px;
left:-1.5px;
width:9px;
height:3px
}
.star:nth-child(24):after {
top:-1.5px;
left:1.5px;
width:3px;
height:9px
}
.star:nth-child(25) {
top:10vh;
left:69vw
}
.star:nth-child(25):before,.star:nth-child(25):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-25s;
animation-delay:-25s
}
.star:nth-child(25):before {
top:2px;
left:-2px;
width:12px;
height:4px
}
.star:nth-child(25):after {
top:-2px;
left:2px;
width:4px;
height:12px
}
.star:nth-child(26) {
top:40vh;
left:68vw
}
.star:nth-child(26):before,.star:nth-child(26):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-26s;
animation-delay:-26s
}
.star:nth-child(26):before {
top:1px;
left:-1px;
width:6px;
height:2px
}
.star:nth-child(26):after {
top:-1px;
left:1px;
width:2px;
height:6px
}
.star:nth-child(27) {
top:10vh;
left:37vw
}
.star:nth-child(27):before,.star:nth-child(27):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-27s;
animation-delay:-27s
}
.star:nth-child(27):before {
top:2px;
left:-2px;
width:12px;
height:4px
}
.star:nth-child(27):after {
top:-2px;
left:2px;
width:4px;
height:12px
}
.star:nth-child(28) {
top:8vh;
left:14vw
}
.star:nth-child(28):before,.star:nth-child(28):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-28s;
animation-delay:-28s
}
.star:nth-child(28):before {
top:1.5px;
left:-1.5px;
width:9px;
height:3px
}
.star:nth-child(28):after {
top:-1.5px;
left:1.5px;
width:3px;
height:9px
}
.star:nth-child(29) {
top:57vh;
left:56vw
}
.star:nth-child(29):before,.star:nth-child(29):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-29s;
animation-delay:-29s
}
.star:nth-child(29):before {
top:1.5px;
left:-1.5px;
width:9px;
height:3px
}
.star:nth-child(29):after {
top:-1.5px;
left:1.5px;
width:3px;
height:9px
}
.star:nth-child(30) {
top:18vh;
left:61vw
}
.star:nth-child(30):before,.star:nth-child(30):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-30s;
animation-delay:-30s
}
.star:nth-child(30):before {
top:1.5px;
left:-1.5px;
width:9px;
height:3px
}
.star:nth-child(30):after {
top:-1.5px;
left:1.5px;
width:3px;
height:9px
}
.star:nth-child(31) {
top:22vh;
left:26vw
}
.star:nth-child(31):before,.star:nth-child(31):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-31s;
animation-delay:-31s
}
.star:nth-child(31):before {
top:.5px;
left:-0.5px;
width:3px;
height:1px
}
.star:nth-child(31):after {
top:-0.5px;
left:.5px;
width:1px;
height:3px
}
.star:nth-child(32) {
top:54vh;
left:11vw
}
.star:nth-child(32):before,.star:nth-child(32):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-32s;
animation-delay:-32s
}
.star:nth-child(32):before {
top:2px;
left:-2px;
width:12px;
height:4px
}
.star:nth-child(32):after {
top:-2px;
left:2px;
width:4px;
height:12px
}
.star:nth-child(33) {
top:71vh;
left:25vw
}
.star:nth-child(33):before,.star:nth-child(33):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-33s;
animation-delay:-33s
}
.star:nth-child(33):before {
top:2px;
left:-2px;
width:12px;
height:4px
}
.star:nth-child(33):after {
top:-2px;
left:2px;
width:4px;
height:12px
}
.star:nth-child(34) {
top:39vh;
left:0vw
}
.star:nth-child(34):before,.star:nth-child(34):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-34s;
animation-delay:-34s
}
.star:nth-child(34):before {
top:.5px;
left:-0.5px;
width:3px;
height:1px
}
.star:nth-child(34):after {
top:-0.5px;
left:.5px;
width:1px;
height:3px
}
.star:nth-child(35) {
top:90vh;
left:53vw
}
.star:nth-child(35):before,.star:nth-child(35):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-35s;
animation-delay:-35s
}
.star:nth-child(35):before {
top:.5px;
left:-0.5px;
width:3px;
height:1px
}
.star:nth-child(35):after {
top:-0.5px;
left:.5px;
width:1px;
height:3px
}
.star:nth-child(36) {
top:96vh;
left:25vw
}
.star:nth-child(36):before,.star:nth-child(36):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
-webkit-animation:blink 1.5s infinite;
animation:blink 1.5s infinite;
-webkit-animation-delay:-36s;
animation-delay:-36s
}
.star:nth-child(36):before {
top:1px;
left:-1px;
width:6px;
height:2px
}
.star:nth-child(36):after {
top:-1px;
left:1px;
width:2px;
height:6px
}
.star:nth-child(37) {
top:48vh;
left:11vw
}
.star:nth-child(37):before,.star:nth-child(37):after {
position:absolute;
content:'';
background-color:#fff;
border-radius:10px;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0