星际穿越太空版404错误页面
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Space 404</title>
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
background: linear-gradient(90deg, #2f3640 23%, #181b20 100%);
}
.moon {
background: linear-gradient(90deg, #d0d0d0 48%, #919191 100%);
position: absolute;
top: -100px;
left: -300px;
width: 900px;
height: 900px;
content: '';
border-radius: 100%;
box-shadow: 0px 0px 30px -4px rgba(0, 0, 0, 0.5);
}
.moon__crater {
position: absolute;
content: '';
border-radius: 100%;
background: linear-gradient(90deg, #7a7a7a 38%, #c3c3c3 100%);
opacity: 0.6;
}
.moon__crater1 {
top: 250px;
left: 500px;
width: 60px;
height: 180px;
}
.moon__crater2 {
top: 650px;
left: 340px;
width: 40px;
height: 80px;
transform: rotate(55deg);
}
.moon__crater3 {
top: -20px;
left: 40px;
width: 65px;
height: 120px;
transform: rotate(250deg);
}
.star {
background: grey;
position: absolute;
width: 5px;
height: 5px;
content: '';
border-radius: 100%;
transform: rotate(250deg);
opacity: 0.4;
animation-name: shimmer;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes shimmer {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
.star1 {
top: 40%;
left: 50%;
animation-delay: 1s;
}
.star2 {
top: 60%;
left: 90%;
animation-delay: 3s;
}
.star3 {
top: 10%;
left: 70%;
animation-delay: 2s;
}
.star4 {
top: 90%;
left: 40%;
}
.star5 {
top: 20%;
left.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0