简约的悬浮动态特效404单页源HTML码

酷爱码

于 2024-07-18 08:04:13 发布

阅读量563

点赞数 4

分类专栏： html 文章标签： html css javascript

本文链接：https://blog.csdn.net/huayula/article/details/140511345

版权

源码介绍

简约的悬浮动态特效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: