一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose

之前为大家分享了那些创意有趣的404页面， html5和css3打造一款创意404页面， HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下：

在线预览 源码下载

实现的代码。

html代码：

 
                404
            
                ERROR
        
                Lost? Maybe I can help.
        
                            Search            
        
                My Suggestions.
            

Home
                
Portfolio
            

css3代码：

     body        {            background-color: #0A7189;            color: #fff;            font: 100% "Lato" , sans-serif;            font-size: 1.8rem;            font-weight: 300;        }                a        {            color: #75C6D9;            text-decoration: none;        }                h3        {            margin-bottom: 1%;        }                ul        {            list-style: none;            margin: 0;            padding: 0;            line-height: 50px;        }                li a:hover        {            color: #fff;        }                .center        {            text-align: center;        }                /* Search Bar Styling */        form > *        {            vertical-align: middle;        }                .srchBtn        {            border: 0;            border-radius: 7px;            padding: 0 17px;            background: #e74c3c;            width: 99px;            border-bottom: 5px solid #c0392b;            color: #fff;            height: 65px;            font-size: 1.5rem;            cursor: pointer;        }                .srchBtn:active        {            border-bottom: 0px solid #c0392b;        }                .srchFld        {            border: 0;            border-radius: 7px;            padding: 0 17px;            max-width: 404px;            width: 40%;            border-bottom: 5px solid #bdc3c7;            height: 60px;            color: #7f8c8d;            font-size: 19px;        }                .srchFld:focus        {            outline-color: rgba(255, 255, 255, 0);        }                /* 404 Styling */        .header        {            font-size: 13rem;            font-weight: 700;            margin: 2% 0 2% 0;            text-shadow: 0px 3px 0px #7f8c8d;        }                /* Error Styling */        .error        {            margin: -70px 0 2% 0;            font-size: 7.4rem;            text-shadow: 0px 3px 0px #7f8c8d;            font-weight: 100;        }