当前位置: 首页> 汽车> 新车 > 简约的悬浮动态特效404单页源HTML码

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

时间:2025/7/9 0:50:10来源:https://blog.csdn.net/huayula/article/details/140511345 浏览次数: 0次

源码介绍

简约的悬浮动态特效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:
关键字:简约的悬浮动态特效404单页源HTML码

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: