«

错误页面404

MitSeek 发布于 阅读：39 CSS 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>制作404页面</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: sans-serif;
            }
            body,html{
                height: 100%;
            }
            body{
                background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
                display: flex;/* 设置布局类型 */
                justify-content: center;/* 水平居中 */
                align-items: center;/* 垂直居中 */
                height:100%;/* 容器的高度 */
            }
            .box{
                text-align: center;
                background: rgba(255, 255, 255,0.1);
                padding: 40px;/* 内边距 */
                border-radius: 15px;/* 圆角边框 */
                box-shadow:0 10px 30px rgba(0,0,0,0.2);/* 阴影 */
                backdrop-filter: blur(10px);/* 元素后边添加图形效果 */
                border: 1px solid rgba(255,255,255,0,0.2);
                max-width:500px;/* 最大宽度 */
                width: 90%;
            }
            h1{
                font-size: 120px;
                margin-bottom: 10px;
                text-shadow:3px 3px 0 rgba(0,0,0,0.2)
                color:#ff6b6b;
            }
            h2{
                font-size: 28px;
                margin: 20px 0 ;
                color: #f8f9fa;
            }
            hr{
                width: 80%;
                margin: 25px auto;
                border: nono;
                height: 2px;
                background: linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent);
            }
            input[type="button"]{
                background: #4cc9f0;
                color: white;
                border: none;
                padding: 12px 30px;
                margin: 10px;
                border-radius: 50px;
                font-size: 16px;
                cursor:pointer;/* 鼠标悬停显示 */
                transition: all 0.3c ease;
                box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            }
            input[type="button"]:hover{/* 悬停时的样子 */
                background: #4361ee;
                transform: translateY(-3px);/* 平移 */
                box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            }
            input[type="button"]:active{/* 鼠标左边不松开时的样子 */
                transform: translateY(1px);
            }
            .error-animation{/* 设置动画 */
                animation: pulse 2s infinite;
            }
            @keyframes pulse{/* 动画具体 */
                0%{transform: scale(1);}
                50%{transform: scale(1.05);}
                100%{transform: scale(1);}
            }
            @media(max-width:480px){/* 媒体查询,小于480的屏幕,则显示下列内容,比如手机 */
                h1{
                    font-size: 80px;
                }
                h2{
                    font-size: 22px;
                }
                .box{
                    padding: 25px;
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h1 class="error-animation">404</h1><hr />
            <h2>此页面不存在</h2><hr />
            <input type="button" value="返回首页" /><hr />
            <input type="button" value="联系管理员"/>
        </div>
    </body>
</html>

CSS