阅读量:2
源码介绍
简约的悬浮动态特效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: