看下最后的效果 继续训练肯定可以更好看
贴上代码
<!DOCTYPE html>
<html>
<head>
<title>404 Error Page</title>
<style>
body {
background-color: #0c0c0c;
color: #fff;
font-family: sans-serif;
font-size: 18px;
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
}
h1 {
font-size: 6em;
margin: 0;
letter-spacing: -0.05em;
text-shadow: 0 0 10px #fff;
}
h2 {
font-size: 2em;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 20px;
}
#spaceship {
width: 150px;
height: 150px;
animation: fly 3s ease-in-out infinite;
margin-top: 50px;
position: relative;
}
#spaceship:before,
#spaceship:after {
content: "";
display: block;
position: absolute;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
animation: flicker 0.5s ease-in-out infinite alternate;
}
#spaceship:before {
top: 0;
left: 0;
animation-delay: 0.2s;
}
#spaceship:after {
bottom: 0;
right: 0;
animation-delay: 0.4s;
}
@keyframes fly {
0% {
transform: translateY(0) rotate(0);
}
25% {
transform: translateY(-100px) rotate(-10deg);
}
50% {
transform: translateY(0) rotate(0);
}
75% {
transform: translateY(100px) rotate(10deg);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes flicker {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<h2>Page Not Found</h2>
<div id="spaceship"></div>
</div>
</body>
</html>附带一个更新维护中404页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网站维护更新中，敬请期待</title>
</head>
<style>
*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
background:#F1FDFE;
height:100%;
}
.mom{
width:600px;
height:100px;
line-height:100px;
text-align:center;
font-size:30px;
border-width:5px;
border-style:dashed;
border-color:rgb(200, 0, 255);
position:relative; left:50%;
margin-left:-300px; top:50%;
margin-top:-50px;
background:#e6fafd;
color:rgb(255, 0, 55);
}
</style>
<body>
<div class="mom">
网站维护更新维护中,敬请期待....
</div>
</body>
</html>