css布局实现降落伞跳山迷失方向404错误页面效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现降落伞跳山迷失方向404错误页面效果代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{background: #d2f5f1}
    .mianBox{width: 100%;margin: 0 auto;position: relative;overflow: hidden;}
    .mianBox >img{position: absolute}
    .yun0{right: -140px;top: 30px;webkit-animation: cloudLarge 105s infinite;-moz-animation: cloudLarge 105s infinite;-o-animation: cloudLarge 105s infinite;animation: cloudLarge 105s infinite;}
    .yun1{left: 5%;top: 48%;-webkit-animation: cloudSmall 105s infinite;-moz-animation: cloudSmall 105s infinite;-o-animation: cloudSmall 105s infinite;animation: cloudSmall 105s infinite;}
    .yun2{left: 16%;top: 35%;-webkit-animation: cloudMedium 105s infinite;-moz-animation: cloudMedium 105s infinite;-o-animation: cloudMedium 105s infinite;animation: cloudMedium 105s infinite;}
    .san{left: 10%;top: 20%;-webkit-animation:dn400 3s 0s ease both;-moz-animation:dn400 3s 0s ease both;animation:dn400 3s 0s ease both;}
    .bird{left: 27%;top: 15%;-webkit-animation: flying 3s infinite;-moz-animation: flying 3s infinite;-o-animation: flying 3s infinite;animation: flying 3s infinite;}
    .disk{left: 234px;top: 98px;z-index: 9;-webkit-animation: flying 2s infinite;-moz-animation: flying 2s infinite;-o-animation: flying 2s infinite;animation: flying 2s infinite;}
    .light{left: 330px;top: 188px;z-index: 8;-webkit-animation: light 1s infinite;-moz-animation: light 1s infinite;-o-animation: light 1s infinite;animation: light 1s infinite;}
    .man{left: 400px;top: 310px;z-index: 7;-webkit-animation: hide 2s 0.5s infinite;-moz-animation: hide 2s 0.5s infinite;-o-animation: hide 2s 0.5s infinite;animation: hide 2s 0.5s infinite;}
    .picv{left: 15%;top: 390px;}
    .tipInfo{position:absolute;z-index:99;margin-left:150px;border: 4px solid #c0ece7;border-color: rgba(192,237,232,07);border-radius:5px;derbackground:#c0ece7;background: rgba(192,237,232,07);width: 360px}
    .tipInfo .in{background: #fff;padding: 0 10%}
    .tipInfo .in h2{line-height:50px;font-size: 30px;color: #e94c3c;border-bottom: 1px dashed #aacdd5;padding: 18px 0}
    .tipInfo .in p{padding:30px 0 50px 0;text-align: center;color: #289575}
    .tipInfo .in p span{margin:0 20px}
    .tipInfo .in p span a{color:#e94c3c;margin: 0 10px}
    .tipInfo .in .desc{overflow: hidden;font-size: 14px;color: #2b2b2b;padding: 0 10%}
    .tipInfo .in .desc h3{font-weight: normal;padding: 20px 0 5px 0}
    .tipInfo .in .desc li{background: url("../images/404/dot.png") no-repeat left center;margin-left: 5px;padding: 5px 0;padding-left: 8px;*padding-left: 20px;}
    @-webkit-keyframes cloudLarge{0%{right: -140px;}
        100%{right: 118%;}}
    @-moz-keyframes cloudLarge{0%{right: -140px;}
        100%{right: 118%;}}
    @-o-keyframes cloudLarge{0%{right: -140px;}
        100%{right: 118%;}}
    @keyframes cloudLarge{0%{right: -140px;}
        100%{right: 118%;}}
    @-webkit-keyframes cloudSmall{0%{left: 5%;}
        100%{left: 108%;}}
    @-moz-keyframes cloudSmall{0%{left: 5%;}
        100%{left: 105%;}}
    @-o-keyframes cloudSmall{0%{left: 5%;}
        100%{left: 105%;}}
    @keyframes cloudSmall{0%{left: 5%;}
        100%{left: 105%;}}
    @-webkit-keyframes cloudMedium{0%{left: 16%;}
        100%{left: -18%;}}
    @-moz-keyframes cloudMedium{0%{left: 16%;}
        100%{left: -18%;}}
    @-o-keyframes cloudMedium{0%{left: 16%;}
        100%{left: -18%;}}
    @keyframes cloudMedium{0%{left: 16%;}
        100%{left: -18%;}}
    @-webkit-keyframes light{0%{opacity: 0;}
        100%{opacity: 100;}}
    @-moz-keyframes light{0%{opacity: 0;}
        100%{opacity: 100;}}
    @-o-keyframes light{0%{opacity: 0;}
        100%{opacity: 100;}}
    @keyframes light{0%{opacity: 0;}
        100%{opacity: 100;}}
    @-webkit-keyframes hide{0%{opacity: 100;}
        100%{opacity: 0;}}
    @-moz-keyframes hide{0%{opacity: 100;}
        100%{opacity: 0;}}
    @-o-keyframes hide{0%{opacity: 100;}
        100%{opacity: 0;}}
    @keyframes hide{0%{opacity: 100;}
        100%{opacity: 0;}}
    @keyframes flying{0%{margin-top: 0px;}
        50%{margin-top: 6px;}
        100%{margin-top: 0px;}}
    @-webkit-keyframes flying{0%{margin-top: 0px;}
        50%{margin-top: 6px;}
        100%{margin-top: 0px;}}
    @-moz-keyframes flying{0%{margin-top: 0px;}
        50%{margin-top: 6px;}
        100%{margin-top: 0px;}}
    @-o-keyframes flying{0%{margin-top: 0px;}
        50%{margin-top: 6px;}
        100%{margin-top: 0px;}}
    @keyframes flying{0%{mar.........完整代码请登录后点击上方下载按钮下载查看