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

代码语言：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('//repo.bfw.wiki/bfwrepo/images/404/img02.png') no-repeat}#oh{opacity:0;z-index:7;left:34.6%;bottom:42%;color:#96bb06;word-spacing:2px;position:absolute;letter-spacing:3px;transform:rotate(-23deg);font:40px/50px 'Bangers',cursive}.txt{left:50%;opacity:0;z-index:7;color:#fff;width:380px;bottom:180px;color:#f6f6f6;position:absolute;text-align:center;margin:0 0 0 -290px;font:300 16px/20px 'Poppins',sans-serif}.txt p{margin:0 0 35px;letter-spacing:1px}.btn{color:#fff;width:170px;padding:10px;border-radius:5px;vertical-align:top;background:#96bb06;display:inline-block;text-decoration:none;text-transform:uppercase;font:16px/20px 'Poppins',sans-serif}@media only screen and (max-width:1870px){#hock{left:47.25%}#title{top:77%}}@media only screen and (max-width:1760px){#hock{left:47.35%}}@media only screen and (max-width:1680px){#wrapper{min-height:870px;height:870px}#hock{left:47.45%;top:40.9%}#oh{left:33.2%}}@media only screen and (max-width:1600px){#hock{left:47.6%}}@media only screen and (max-width:1570px){#hock{left:47.7%}#oh{left:32.2%}}@media only screen and (max-width:1462px){#hock{left:47.85%}}@media only screen and (max-width:1400px){#wrapper{min-height:768px;height:768px}#hock{left:48.05%;top:45.9%}#oh{left:31.2%}.txt{bottom:127px;margin:0 0 0 -230px}.txt p{margin:0 0 23px}#title{top:76%}}@media only screen and (max-width:1370px){#wrapper{min-height:650px;height:650px}#hock{left:48.095%;to.........完整代码请登录后点击上方下载按钮下载查看