分享404页面代码
<!DOCTYPE html><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>404 - 该页面找不到或已被删除了</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 20px;
}
.page-404 {
max-width: 400px;
width: 100%;
text-align: center;
padding: 20px 0;
}
.svg-wrapper {
position: relative;
width: 100%;
max-width: 220px;
margin: 0 auto;
}
.svg-wrapper svg {
display: block;
width: 100%;
height: auto;
}
.digit-1 {
animation: float1 2.4s ease-in-out infinite;
}
.digit-2 {
animation: float2 2.4s ease-in-out infinite;
}
.digit-3 {
animation: float3 2.4s ease-in-out infinite;
}
@keyframes float1 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-28px); }
}
@keyframes float2 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(28px); }
}
@keyframes float3 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-24px); }
}
.tip-text {
color: #978CFF;
font-size: 15px;
line-height: 1.6;
margin-top: 18px;
padding: 0 10px;
letter-spacing: 0.5px;
}
.btn-home {
display: inline-block;
margin-top: 20px;
font-size: 14px;
color: #ffffff;
height: 38px;
line-height: 38px;
padding: 0 24px;
border-radius: 4px;
background-color: #52c41a;
text-decoration: none;
transition: opacity 0.2s;
}
.btn-home:hover {
opacity: 0.8;
}
@media (max-width: 480px) {
.page-404 {
max-width: 320px;
padding: 10px 0;
}
.svg-wrapper {
max-width: 160px;
}
.tip-text {
font-size: 13px;
margin-top: 14px;
}
.btn-home {
font-size: 13px;
height: 34px;
line-height: 34px;
padding: 0 18px;
}
@keyframes float1 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes float2 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(20px); }
}
@keyframes float3 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-16px); }
}
}
@media (max-width: 380px) {
.svg-wrapper {
max-width: 130px;
}
.tip-text {
font-size: 12px;
}
@keyframes float1 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-16px); }
}
@keyframes float2 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(16px); }
}
@keyframes float3 {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-12px); }
}
}
</style><section class="page-404">
<div class="svg-wrapper">
<svg t="1657115709491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="300" height="300">
<path d="M354.133333 691.2a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z" fill="#E3E5FC" p-id="2518"></path>
<path d="M8.533333 832a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z" fill="#E3E5FC" p-id="2519"></path>
<path d="M661.333333 797.866667a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z" fill="#E3E5FC" p-id="2520"></path>
<g class="digit-1">
<path d="M260.266667 789.333333c-21.333333 0-38.4-17.066667-38.4-38.4v-59.733333H38.4c-12.8 0-29.866667-8.533333-34.133333-21.333333-4.266667-17.066667-4.266667-29.866667 4.266666-42.666667l221.866667-294.4c8.533333-12.8 25.6-17.066667 42.666667-12.8 17.066667 4.266667 25.6 21.333333 25.6 38.4v256h34.133333c21.333333 0 38.4 17.066667 38.4 38.4s-17.066667 38.4-38.4 38.4H298.666667v59.733333c0 21.333333-17.066667 38.4-38.4 38.4z m-145.066667-179.2h106.666667V469.333333l-106.666667 140.8z" fill="#978CFF" p-id="2517"></path>
</g>
<g class="digit-2">
<path d="M533.333333 597.333333c-46.933333 0-85.333333-25.6-119.466666-68.266666-29.866667-38.4-42.666667-93.866667-42.666667-145.066667 0-55.466667 17.066667-106.666667 42.666667-145.066667 29.866667-42.666667 72.533333-68.266667 119.466666-68.266666 46.933333 0 85.333333 25.6 119.466667 68.266666 29.866667 38.4 42.666667 93.866667 42.666667 145.066667 0 55.466667-17.066667 106.666667-42.666667 145.066667-34.133333 46.933333-76.8 68.266667-119.466667 68.266666z m0-362.666666c-55.466667 0-98.133333 68.266667-98.133333 149.333333s46.933333 149.333333 98.133333 149.333333c55.466667 0 98.133333-68.266667 98.133334-149.333333s-46.933333-149.333333-98.133334-149.333333z" fill="#978CFF" p-id="2517"></path>
</g>
<g class="digit-3">
<path d="M913.066667 742.4c-21.333333 0-38.4-17.066667-38.4-38.4v-59.733333h-183.466667c-12.8 0-29.866667-8.533333-34.133333-21.333334-8.533333-12.8-4.266667-29.866667 4.266666-38.4l221.866667-294.4c8.533333-12.8 25.6-17.066667 42.666667-12.8 17.066667 4.266667 25.6 21.333333 25.6 38.4v256h34.133333c21.333333 0 38.4 17.066667 38.4 38.4s-17.066667 38.4-38.4 38.4h-34.133333v59.733334c0 17.066667-17.066667 34.133333-38.4 34.133333zM768 567.466667h106.666667V426.666667L768 567.466667z" fill="#978CFF" p-id="2517"></path>
</g>
</svg>
</div>
<div class="tip-text">该页面找不到或已被删除了</div>
</section># 无标签