404页⾯不能加载css，纯CSS404页⾯布局css
body {
margin: 0;
font-size: 20px;
}
* {
box-sizing: border-box;
}
.container {
position: relative;
display: flex;
align-items: center;
box sizingjustify-content: center;
height: 100vh;
background-color: #2D2D5C;
color: rgba(255,255,255,.3);
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: 37.1184371184%; left: 21.5897939156%;
font-size: 19px;
filter: blur(0.02px); animation: 39s float infinite; }
.
particle:nth-child(2) {
top: 26.3093788063%;
left: 44.0744368266%;
font-size: 21px;
filter: blur(0.04px);
animation: 27s float2 infinite;
}
.particle:nth-child(3) {
top: 54.1062801932%;
left: 12.6459143969%;
font-size: 28px;
filter: blur(0.06px);
animation: 37s float infinite;
}
.particle:nth-child(4) {
top: 38.2352941176%;
left: 37.4015748031%;
font-size: 16px;
filter: blur(0.08px);
animation: 32s floatReverse2 infinite; }
.particle:nth-child(5) {
top: 31.2958435208%;
left: 48.1335952849%;
font-size: 18px;
filter: blur(0.1px);
animation: 40s float infinite;
}
.particle:nth-child(6) {
top: 58.1997533909%;
left: 59.3471810089%;
font-size: 11px;
filter: blur(0.12px);
animation: 31s float infinite;
}
.particle:nth-child(7) {
top: 77.9284833539%;
left: 54.4015825915%;
font-size: 11px;
filter: blur(0.14px);
animation: 29s float infinite;
}
.particle:nth-child(8) {
top: 0.9720534629%;
left: 57.6735092864%;
font-size: 23px;
filter: blur(0.16px);
animation: 36s floatReverse2 infinite; }
.particle:nth-child(9) {
top: 55.1390568319%;
left: 49.6592015579%;
font-size: 27px;
filter: blur(0.18px);
animation: 25s floatReverse infinite; }
.particle:nth-child(10) {
top: 5.8823529412%;
left: 78.7401574803%;
font-size: 16px;
filter: blur(0.2px);
animation: 40s floatReverse infinite; }
.particle:nth-child(11) {
top: 50.8557457213%;
left: 69.7445972495%;
font-size: 18px;
filter: blur(0.22px);
animation: 38s float infinite;
}
.
particle:nth-child(12) {
top: 91.1515151515%;
left: 28.2926829268%;
font-size: 25px;
filter: blur(0.24px);
animation: 29s floatReverse2 infinite; }
.particle:nth-child(13) {
top: 45.4655380895%;
left: 61.3437195716%;
font-size: 27px;
filter: blur(0.26px);
animation: 35s floatReverse infinite; }
.particle:nth-child(14) {
top: 40.245398773%;
left: 23.645320197%;
font-size: 15px;
filter: blur(0.28px);
animation: 23s floatReverse2 infinite; }
.particle:nth-child(15) {
top: 4.8309178744%;
left: 38.9105058366%;
font-size: 28px;
filter: blur(0.3px);
animation: 29s float2 infinite;
}
.particle:nth-child(16) {
top: 62.8019323671%;
left: 43.7743190661%;
font-size: 28px;
filter: blur(0.32px);
animation: 24s floatReverse2 infinite;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。