css布局实现灯塔迷失404错误页面效果代码-html代码-BFW代码库

css布局实现灯塔迷失404错误页面效果代码

代码语言：html

代码描述：css布局实现灯塔迷失404错误页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex, nofollow">


    <style type="text/css">
        html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,em,button{margin:0;padding:0;}
        body{font-size:12px;font-family:Simsun,sans-serif;color:#333;}
        img,fieldset{border:0 none}
        input,textarea{font-size:12px;}
        textarea{resize:none;}
        table{border-collapse:collapse;border-spacing:0;}
        a{color:#003d7e;text-decoration:none;}
        a:hover{text-decoration:underline;}
        h1,h2,h3,h4,h5,h6{font-family:"Times New Roman",Simsun;}
        ul,ol,li{list-style:none outside none;}
        dfn{font-style:normal;}
        
        .content,.errorinfo,#footer{width:800px;}
        .logo,.tower,.cruise{background:url(//repo.bfw.wiki/bfwrepo/images/404/un_pic.png) no-repeat;}
        .wrap{background:#1158e7 url(//repo.bfw.wiki/bfwrepo/images/404/404_bg.jpg) no-repeat center bottom;width:100%;overflow:hidden;}
        .content{position:relative;z-index:1;height:480px;margin:0 auto;padding-top:100px;}
        .logo{ position: relative;z-index:5; width:144px;height:54px;margin:0 auto;overflow:hidden;text-indent:-500px;background-position:0 0;}
        .errorinfo{color:#fff;display:block;font-family:"microsoft yahei","simhei",sans-serif;font-size:24px;font-weight:normal;text-align:center;margin:30px auto;padding:0;}
        a.goback{display:block;position: relative;z-index: 4; width:112px;margin:20px auto;padding:8px 0;color:#fff;font-family:"microsoft yahei","simhei",sans-serif;font-size:16px;text-align:center;text-decoration:none;background-color:#0f4dc5;}
        a.goback:hover{background-color:#3f92f0;}
        
        .tower{background-position:0 -127px;position:absolute;z-index:2;top:140px;left:20px;width:116px;height:264px;}
        .towerlight{position:absolute;z-index:1;left:52px;top:166px;width:52px;height:52px;background-color:#fefa90;box-shadow:0 0 50px rgba(255,248,74,1);-webkit-animation:3s linear 0s none infinite light;-moz-animation:3s linear 0s none infinite light;animation:3s linear 0s none infinite light;}
        @-webkit-keyframes light{
        	0%{box-shadow:0 0 50px rgba(255,254,165,1);}
        	50%{box-shadow:0 0 10px rgba(255,248,74,1);}
        	100%{box-shadow:0 0 50px rgba(255,254,165,1);}
        }
        @-moz-keyframes light{
        	0%{box-shadow:0 0 50px rgba(255,254,165,1);}
        	50%{box-shadow:0 0 10px rgba(255,248,74,1);}
        	100%{box-shadow:0 0 50px rgba(255,254,165,1);}
        }
        @keyframes light{
        	0%{box-shadow:0 0 50px rgba(255,254,165,1);}
        	50%{box-shadow:0 0 10px rgba(255,248,74,1);}
        	100%{box-shadow:0 0 50px rgba(255,254,165,1);}
        }
        .beam{position:absolute;z-index:3;left:-232px;top:75px;width:973px;height:198px;background:url(//repo.bfw.wiki/bfwrepo/images/404/beam.png) no-repeat;-webkit-transform:rotate(15deg);transform:rotate(15deg);-webkit-transform-origin:308px 115px;transform-origin:308px 115px;-webkit-animation:10s linear 0s none infinite beam;-moz-animation:10s linear 0s none infinite beam;animation:10s linear 0s none infinite beam;}
        @-webkit-keyframes beam{
   .........完整代码请登录后点击上方下载按钮下载查看