简约的悬浮动态特效404单页源HTML码
源码介绍
简约的悬浮动态特效404单页源HTML码，页面简约美观，可以做网站错误页或者丢失页面，将下面的代码放到空白的HTML里面，然后上传到服务器里面，设置好重定向即可
效果预览
完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>galaxy not found </title>
<style>body {
margin: 0;
font-size: 20px;
}
* {
box-sizing: border-box;
}
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: white;
color: black;
font-family: arial, sans-serif;
overflow: hidden;
}
.content {
position: relative;
width: 600px;
max-width: 100%;
margin: 20px;
background: white;
padding: 60px 40px;
text-align: center;
box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
opacity: 0;
animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
}
.content p {
font-size: 1.3rem;
margin-top: 0;
margin-bottom: 0.6rem;
letter-spacing: 0.1rem;
color: #595959;
}
.content p:last-child {
margin-bottom: 0;
}
.content button {
display: inline-block;
margin-top: 2rem;
padding: 0.5rem 1rem;
border: 3px solid #595959;
background: transparent;
font-size: 1rem;
color: #595959;
text-decoration: none;
cursor: pointer;
font-weight: bold;
}
.particle {
position: absolute;
display: block;
pointer-events: none;
}
.particle:nth-child(1) {
top: 51.2946979038%;
left: 52.4233432245%;
font-size: 11px;
filter: blur(0.02px);
animation: 35s floatReverse2 infinite;
}
.particle:nth-child(2) {
top: 20.4379562044%;
left: 45.988258317%;
font-size: 22px;
filter: blur(0.04px);
animation: 37s float infinite;
}
.particle:nth-child(3) {
top: 67.7300613497%;
left: 24.6305418719%;
font-size: 15px;
filter: blur(0.06px);
animation: 36s floatReverse2 infinite;
}
.particle:nth-child(4) {
top: 62.1454993835%;
left: 36.5974282888%;
font-size: 11px;
filter: blur(0.08px);
animation: 26s floatReverse infinite;
}
.particle:nth-child(5) {
top: 5.8968058968%;
left: 78.8954635108%;
font-size: 14px;
filter: blur(0.1px);
animation: 34s float2 infinite;
}
.particle:nth-child(6) {
top: 35.1219512195%;
left: 38.2352941176%;
font-size: 20px;
filter: blur(0.12px);
animation: 29s floatReverse infinite;
}
.particle:nth-child(7) {
top: 88.3435582822%;
left: 17.7339901478%;
font-size: 15px;
filter: blur(0.14px);
animation: 35s floatReverse2 infinite;
}
.particle:nth-child(8) {
top: 34.398034398%;
left: 12.8205128205%;
font-size: 14px;
filter: blur(0.16px);
animation: 37s float infinite;
}
.particle:nth-child(9) {
top: 34.0632603406%;
left: 35.2250489237%;
font-size: 22px;
filter: blur(0.18px);
animation: 36s floatReverse infinite;
}
.particle:nth-child(10) {
top: 41.0256410256%;
left: 1.9627085378%;
font-size: 19px;
filter: blur(0.2px);
animation: 38s floatReverse2 infinite;
}
.particle:nth-child(11) {
top: 37.0731707317%;
left: 34.3137254902%;
font-size: 20px;
filter: blur(0.22px);
animation: 21s float2 infinite;
}
.particle:nth-child(12) {
top: 87.2549019608%;
left: 32.4803149606%;
font-size: 16px;
filter: blur(0.24px);
animation: 26s floatReverse infinite;
}
.particle:nth-child(13) {
top: 62.7450980392%;
left: 3.937007874%;
font-size: 16px;
filter: blur(0.26px);
animation: 28s float infinite;
}
.particle:nth-child(14) {
top: 93.137254902%;
left: 3.937007874%;
font-size: 16px;
filter: blur(0.28px);
animation: 26s floatReverse infinite;
}
.particle:nth-child(15) {
top: 30.5418719212%;
left: 63.2411067194%;
font-size: 12px;
filter: blur(0.3px);
animation: 39s floatReverse2 infinite;
}
.particle:nth-child(16) {
top: 6.8126520681%;
left: 62.6223091977%;
font-size: 22px;
filter: blur(0.32px);
animation: 29s float infinite;
}
.particle:nth-child(17) {
top: 93.2038834951%;
left: 68.359375%;
font-size: 24px;
filter: blur(0.34px);
animation: 37s float2 infinite;
}
.particle:nth-child(18) {
top: 73.2600732601%;
left: 3.9254170756%;
font-size: 19px;
filter: blur(0.36px);
animation: 31s floatReverse2 infinite;
}
.particle:nth-child(19) {
top: 68.7116564417%;
left: 17.7339901478%;
font-size: 15px;
filter: blur(0.38px);
animation: 28s float2 infinite;
}
.particle:nth-child(20) {
top: 17.4757281553%;
left:原文地址：https://blog.csdn.net/huayula/article/details/140511345
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！