css布局实现小兔子月亮上钓鱼404页面效果代码-html代码-BFW代码库

css布局实现小兔子月亮上钓鱼404页面效果代码

代码语言：html

代码描述：css布局实现小兔子月亮上钓鱼404页面效果代码

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

<!DOCTYPE html>
<html>

<head>
    <!-- set the encoding of your site -->
    <meta charset="utf-8">
    <!-- set the viewport width and initial-scale on mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404页面未找到这个页面 </title>

    <meta name="keywords" content="404页面" />
    <style>
        html{background:#8ab407}body{margin:0}#wrapper{height:969px;overflow:hidden;min-height:969px;position:relative}#mt-cloud,#mt-bluesky,#night,#stars{top:0;left:0;right:0;bottom:0;width:100%;position:absolute}#mt-bluesky{z-index:1;background:#fff url(//repo.bfw.wiki/bfwrepo/images/404/sky.png) repeat-x top left}#mt-sun{top:50%;left:45%;z-index:2;width:150px;height:152px;position:absolute;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/sun.png) no-repeat center center}#mt-sun2{top:50%;left:45%;z-index:2;opacity:0;width:150px;height:152px;position:absolute;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/sun2.png) no-repeat center center}#mt-cloud{z-index:3;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/clouds.png) repeat-x top left}#mt-base{position:absolute;left:0;right:0;bottom:0;width:100%;height:232px;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/ground.png) repeat-x bottom center;z-index:3}#base-overlay{position:absolute;left:0;right:0;bottom:0;width:100%;height:232px;opacity:0;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/night-glow.png) repeat-x bottom center;z-index:7}#night{z-index:4;opacity:0;background-color:#000}#stars{z-index:5;opacity:0;bottom:200px;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/stars.png) repeat-x bottom center}#sstar{top:10%;left:40%;z-index:5;opacity:0;width:126px;height:80px;position:absolute;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/shootingstar.png) no-repeat 80px -200px}#moon{top:60%;left:45%;z-index:6;opacity:0;width:292px;height:292px;position:absolute;background:transparent url(//repo.bfw.wiki/bfwrepo/images/404/moon.png) no-repeat center center}#title{top:80%;z-index:6;opacity:0;left:45%;color:#fff;width:292px;position:absolute;letter-spacing:23px;font:108px/120px 'Bangers',cursive}#title span{top:0;right:64.8%;position:absolute;transform:rotate(-19deg)}#title span:after{top:-8px;left:169px;width:17px;content:"";height:43px;position:absolute;transform:rotate(19deg);background:url('//repo.bfw.wiki/bfwrepo/images/404/img01.png') no-repeat}#hock{top:37.9%;width:2px;z-index:5;opacity:0;left:47.2%;position:absolute;background:url('//repo.bfw.wiki/bfwrepo/images/404/img03.png') repeat-y}#hock:after{left:0;width:2px;content:"";bottom:100%;height:153px;position:absolute;background:url('//re.........完整代码请登录后点击上方下载按钮下载查看