分享博客的动态404页面

Eno (UID: 59093) 4小时前 [复制链接]
帖子链接已复制到剪贴板
帖子已经有人评论啦，不支持删除！
101 3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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>
</head>
<body>
    <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>
</body>
</html>