仿UC浏览器错误页面建筑升起降落效果

经常玩手机UC浏览器的用户应该看到过建筑升起降落效果,这里模仿下

仿UC浏览器错误页面建筑升起降落效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        @charset "UTF-8";

        body {
            margin: 0;
            font-family: 'microsoft yahei',Arial,sans-serif;
        }

        #world {
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: #fcc6ff;
            *zoom: 1;
            filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFCC6FF', endColorstr='#FFBCE1FF');
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjYzZmZiIvPjxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjYmNlMWZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
            background-size: 100%;
            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcc6ff), color-stop(99%, #bce1ff));
            background-image: -moz-linear-gradient(top, #fcc6ff 0%, #bce1ff 99%);
            background-image: -webkit-linear-gradient(top, #fcc6ff 0%, #bce1ff 99%);
            background-image: linear-gradient(to bottom, #fcc6ff 0%, #bce1ff 99%);
            -moz-transition: background-image 5s ease-in-out;
            -o-transition: background-image 5s ease-in-out;
            -webkit-transition: background-image 5s ease-in-out;
            transition: background-image 5s ease-in-out;
            display: -webkit-flex;
            display: flex;
            display: -ms-flexbox;
            -webkit-flex-direction: column;
            flex-direction: column;
            -ms-flex-direction: column;
            -webkit-align-items: center;
            align-items: center;
            -ms-align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            -ms-justify-content: center;
            text-align: center;
        }
        #world:before {
            position: absolute;
            top: 0px;
            left: 0px;
            content: '';
            width: 100%;
            height: 100%;
            opacity: 1;
            -moz-transition: opacity 3s ease-in-out;
            -o-transition: opacity 3s ease-in-out;
            -webkit-transition: opacity 3s ease-in-out;
            transition: opacity 3s ease-in-out;
            background-color: #004691;
            *zoom: 1;
            filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF004691', endColorstr='#FF050056');
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNDY5MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA1MDA1NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
            background-size: 100%;
            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #004691), color-stop(100%, #050056));
            background-image: -moz-linear-gradient(top, #004691 0%, #050056 100%);
            background-image: -webkit-linear-gradient(top, #004691 0%, #050056 100%);
            background-image: linear-gradient(to bottom, #004691 0%, #050056 100%);
        }

        h1 {
            position: relative;
            font-family: 'microsoft yahei',Arial,sans-serif;
            color: #88A;
            margin: 1em 0;
        }

        #sunmoon {
            position: relative;
            display: block;
            top: 120px;
            -moz-transition: -moz-transform 2s ease-in-out;
            -o-transition: -o-transform 2s ease-in-out;
            -webkit-transition: -webkit-transform 2s ease-in-out;
            transition: transform 2s ease-in-out;
            -moz-transform-origin: 0 -60px 50%;
            -ms-transform-origin: 0 -60px 50%;
            -webkit-transform-origin: 0 -60px 50%;
            transform-origin: 0 -60px 50%;
            -moz-transform: rotateZ(0deg);
            -ms-transform: rotateZ(0deg);
            -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
        }
        #sunmoon::before, #sunmoon::after {
            display: block;
            border-radius: 60px;
            content: ' ';
            position: absolute;
            background: #FFF;
            width: 120px;
            height: 120px;
        }
        #sunmoon::before {
            top: -270px;
            left: -30px;
            background: none;
            box-shadow: 30px 30px 0 0 #FFF;
        }
        #sunmoon::after {
            top: 240px;
        }

        .sunmoon:checked ~ #world::before {
            opacity: 0;
        }

        .sunmoon:checked ~ #world #sunmoon {
            -moz-transform: rotateZ(180deg) translateY(-120px);
            -ms-transform: rotateZ(180deg) translateY(-120px);
            -webkit-transform: rotateZ(180deg) translateY(-120px);
            transform: rotateZ(180deg) translateY(-120px);
        }

        .sunmoon:not(:checked) ~ #world #sunmoon {
            -moz-transform: rotateZ(0deg) translateY(0px);
            -ms-transform: rotateZ(0deg) translateY(0px);
            -webkit-transform: rotateZ(0deg) translateY(0px);
            transform: rotateZ(0deg) translateY(0px);
        }

        .tower-1:checked ~ #world #towers .tower.north-west {
            opacity: 0.5;
        }

        #towers {
            -moz-transform: scale(1, 0.7);
            -ms-transform: scale(1, 0.7);
            -webkit-transform: scale(1, 0.7);
            transform: scale(1, 0.7);
            width: 600px;
            height: 360px;
            position: relative;
        }

        .tower {
            width: 60px;
            height: 60px;
            position: absolute;
        }
        .tower::after, .tower::before {
            content: '';
            display: block;
            position: absolute;
            width: 32px;
            height: 360px;
        }
        .tower::after {
            left: 30px;
            top: 60px;
            -moz-transform-origin: 0px 0px;
            -ms-transform-origin: 0px 0px;
            -webkit-transform-origin: 0px 0px;
            transform-origin: 0px 0px;
            -moz-transform: skewY(-45deg);
            -ms-transform: skewY(-45deg);
            -webkit-transform: skewY(-45deg);
            transform: skewY(-45deg);
            background: #a6a6bf;
        }
        .tower::before {
            top: 60px;
            left: -2px;
            -moz-transform-origin: 30px 0px;
            -ms-transform-origin: 30px 0px;
            -webkit-transform-origin: 30px 0px;
            transform-origin: 30px 0px;
            -moz-transform: skewY(45deg);
            -ms-transform: skewY(45deg);
            -webkit-transform: skewY(45deg);
            transform: skewY(45deg);
            background: #666680;
        }
        .tower.south-west {
            z-index: 3;
            bottom: 0px;
            left: 30px;
        }
        .tower.south-west::after, .tower.south-west::before {
            height: 300px;
        }
        .tower.south-west .spire-roof {
            border-bottom: 78px solid #2b336f;
            border-right: 57px solid #808ce6;
            border-left: 12px solid #404da6;
            border-top: 18px solid #aab3ee;
        }
        .tower.north-west {
            left: 126px;
            top: 14px;
        }
        .tower.north-west::after, .tower.north-west::before {
            height: 480px;
        }
        .tower.north-west .spire-roof {
            border-bottom: 78px solid #6f333c;
            border-right: 57px solid #e68c99;
            border-left: 12px solid #a64d59;
            border-top: 18px solid #eeb3bb;
        }
        .tower.south-east {
            right: 159.96px;
            bottom: 159.96px;
            z-index: 100;
        }
        .tower.south-east::after, .tower.south-east::before {
            height: 600px;
        }
        .tower.south-east .spire-roof {
            border-bottom: 78px solid #226f33;
            border-right: 57px solid #73e68c;
            border-left: 12px solid #33a64d;
            border-top: 18px solid #a2eeb3;
        }
        .tower.north-east {
            right: 34px;
            top: 15px;
        }
        .tower.north-east .spire-roof {
            border-bottom: 78px solid #33332b;
            border-right: 57px solid #8c8c80;
            border-left: 12px solid #4d4d40;
            border-top: 18px solid #b3b3aa;
        }
        .tower > .path.spire {
            background: #9494b3;
            z-index: 10;
        }
        .tower > .path.spire > .path {
            z-index: -1;
        }
        .tower > .path.spire::before {
            top: -60px;
            left: -120px;
            height: 120px;
            background: #666680;
        }
        .tower > .path.spire::after {
            width: 120px;
            left: -60px;
            top: -240px;
            background: #a6a6bf;
        }
        .tower > .path .path, .tower > .path:not(.spire) {
            background: #a3a3a3;
        }

        .show:checked ~ #world #towers .tower {
            -moz-transition: -moz-transform 1s ease-out, opacity 2s ease-out;
            -o-transition: -o-transform 1s ease-out, opacity 2s ease-out;
            -webkit-transition: -webkit-transform 1s ease-out, opacity 2s ease-out;
            transition: transform 1s ease-out, opacity 2s ease-out;
        }
        .show:checked ~ .tower-1:checked ~ #world #towers .tower.north-west {
            -moz-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        .show:checked ~ .tower-1:not(:checked) ~ #world #towers .tower.north-west {
            -moz-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
            -moz-transform: translateY(-126px);
            -ms-transform: translateY(-126px);
            -webkit-transform: translateY(-126px);
            transform: translateY(-126px);
            opacity: 1;
        }
        .show:checked ~ #world #towers .tower.north-east {
            -moz-transition-delay: 0.45s;
            -o-transition-delay: 0.45s;
            -webkit-transition-delay: 0.45s;
            transition-delay: 0.45s;
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        .show:checked ~ #world #towers .tower.south-west {
            -moz-transition-delay: 0.8s;
            -o-transition-delay: 0.8s;
            -webkit-transition-delay: 0.8s;
            transition-delay: 0.8s;
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        .show:checked ~ .tower-2:checked ~ #world #towers .tower.south-east {
            -moz-transform: translateY(0);
            -ms-transform: translateY(0);
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
        .show:checked ~ .tower-2:not(:checked) ~ #world #towers .tower.south-east {
            -moz-transform: translateY(255px);
            -ms-transform: translateY(255px);
            -webkit-transform: translateY(255px);
            transform: translateY(255px);
            opacity: 1;
        }
        .show:checked ~ #world #towers .tower .path {
            opacity: 1;
        }

        .show:not(:checked) ~ #world #towers .tower {
            -moz-transition: -moz-transform 1s ease-in, opacity 0.75s ease-in;
            -o-transition: -o-transform 1s ease-in, opacity 0.75s ease-in;
            -webkit-transition: -webkit-transform 1s ease-in, opacity 0.75s ease-in;
            transition: transform 1s ease-in, opacity 0.75s ease-in;
        }
        .show:not(:checked) ~ #world #towers .tower.north-west {
            -moz-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
            -moz-transform: translateY(360px);
            -ms-transform: translateY(360px);
            -webkit-transform: translateY(360px);
            transform: translateY(360px);
            opacity: 0;
        }
        .show:not(:checked) ~ #world #towers .tower.north-east {
            -moz-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
            -moz-transform: translateY(360px);
            -ms-transform: translateY(360px);
            -webkit-transform: translateY(360px);
            transform: translateY(360px);
            opacity: 0;
        }
        .show:not(:checked) ~ #world #towers .tower.south-west {
            -moz-transition-delay: 0.3s;
            -o-transition-delay: 0.3s;
            -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
            -moz-transform: translateY(360px);
            -ms-transform: translateY(360px);
            -webkit-transform: translateY(360px);
            transform: translateY(360px);
            opacity: 0;
        }
        .show:not(:checked) ~ #world #towers .tower.south-east {
            -moz-transition-delay: 0.4s;
            -o-transition-delay: 0.4s;
            -webkit-transition-delay: 0.4s;
            transition-delay: 0.4s;
            -moz-transform: translateY(360px);
            -ms-transform: translateY(360px);
            -webkit-transform: translateY(360px);
            transform: translateY(360px);
            opacity: 0;
        }
        .show:not(:checked) ~ #world #towers .tower .path {
            opacity: 0;
        }

        .path {
            -moz-transition: opacity 2s ease-out;
            -o-transition: opacity 2s ease-out;
            -webkit-transition: opacity 2s ease-out;
            transition: opacity 2s ease-out;
            position: absolute;
            top: 0px;
            width: 60px;
            height: 60px;
            box-shadow: inset 0px 0px 0px 15px #989898;
            -moz-transform-origin: 0px 0px 50%;
            -ms-transform-origin: 0px 0px 50%;
            -webkit-transform-origin: 0px 0px 50%;
            transform-origin: 0px 0px 50%;
            -moz-transform: rotateZ(45deg) scale(0.75);
            -ms-transform: rotateZ(45deg) scale(0.75);
            -webkit-transform: rotateZ(45deg) scale(0.75);
            transform: rotateZ(45deg) scale(0.75);
        }
        .path.south {
            z-index: 1;
        }
        .path.east {
            z-index: 2;
        }
        .path.north {
            z-index: 3;
        }
        .path > .path.north > .path.west::before {
            height: 0;
            width: 0;
            background: none;
            border-right: 0;
            border-bottom: 60px solid transparent;
            border-left: 60px solid #737373;
        }
        .path.half-blocked-east::after {
            height: 0;
            width: 0;
            background: none;
            border-left: 0;
            border-right: 60px solid transparent;
            border-top: 60px solid #b3b3b3;
        }
        .path > .north::before {
            background: none;
        }
        .path > .west::after {
            background: none;
        }
        .path.to-east::after {
            background: none;
        }
        .path.to-south::before {
            background: none;
        }
        .path::after, .path::before {
            content: '';
            display: block;
            position: relative;
            width: 60px;
            height: 60px;
        }
        .path::after {
            left: 60px;
            top: -60px;
            -moz-transform-origin: 0px 0px;
            -ms-transform-origin: 0px 0px;
            -webkit-transform-origin: 0px 0px;
            transform-origin: 0px 0px;
            -moz-transform: skewY(45deg);
            -ms-transform: skewY(45deg);
            -webkit-transform: skewY(45deg);
            transform: skewY(45deg);
            background: #b3b3b3;
        }
        .path::before {
            top: 60px;
            -moz-transform-origin: 30px 0px;
            -ms-transform-origin: 30px 0px;
            -webkit-transform-origin: 30px 0px;
            transform-origin: 30px 0px;
            -moz-transform: skewX(45deg);
            -ms-transform: skewX(45deg);
            -webkit-transform: skewX(45deg);
            transform: skewX(45deg);
            background: #737373;
        }
        .path > .path.north {
            -moz-transform: translateY(-60px);
            -ms-transform: translateY(-60px);
            -webkit-transform: translateY(-60px);
            transform: translateY(-60px);
        }
        .path > .path.east {
            -moz-transform: translateX(60px);
            -ms-transform: translateX(60px);
            -webkit-transform: translateX(60px);
            transform: translateX(60px);
        }
        .path > .path.south {
            -moz-transform: translateY(60px);
            -ms-transform: translateY(60px);
            -webkit-transform: translateY(60px);
            transform: translateY(60px);
        }
        .path > .path.west {
            -moz-transform: translateX(-60px);
            -ms-transform: translateX(-60px);
            -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
        }

        .spire-roof {
            display: block;
            position: absolute;
            top: -132px;
            left: -120px;
            z-index: 200;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
            -moz-transform: rotateX(45deg);
            -ms-transform: rotateX(45deg);
            -webkit-transform: rotateX(45deg);
            transform: rotateX(45deg);
        }

        @-moz-keyframes clouds {
            0% {
                -moz-transform: translateX(0px);
                transform: translateX(0px);
            }
            100% {
                -moz-transform: translateX(-2000px);
                transform: translateX(-2000px);
            }
        }
        @-webkit-keyframes clouds {
            0% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px);
            }
            100% {
                -webkit-transform: translateX(-2000px);
                transform: translateX(-2000px);
            }
        }
        @keyframes clouds {
            0% {
                -moz-transform: translateX(0px);
                -ms-transform: translateX(0px);
                -webkit-transform: translateX(0px);
                transform: translateX(0px);
            }
            100% {
                -moz-transform: translateX(-2000px);
                -ms-transform: translateX(-2000px);
                -webkit-transform: translateX(-2000px);
                transform: translateX(-2000px);
            }
        }
        .clouds {
            position: absolute;
            height: 600px;
            content: "♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣";
            letter-spacing: -0.15em;
            color: #FFF;
            left: -1000px;
            width: 4000px;
            background: #FFF;
            font-size: 1em;
        }
        .clouds::after {
            content: "♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣♥♣";
            display: block;
            position: absolute;
            font-size: 1em;
            top: -0.6em;
            left: 0px;
        }
        .clouds.back {
            -moz-animation: clouds 240s linear 0s infinite;
            -webkit-animation: clouds 240s linear 0s infinite;
            animation: clouds 240s linear 0s infinite;
            z-index: -1;
            background: #DDD;
            top: 180px;
        }
        .clouds.back::after {
            color: #DDD;
            font-size: 14em;
        }
        .clouds.middle {
            z-index: 2;
            top: 360px;
            background: #EEE;
            -moz-animation: clouds 180s linear 0s infinite;
            -webkit-animation: clouds 180s linear 0s infinite;
            animation: clouds 180s linear 0s infinite;
        }
        .clouds.middle::after {
            font-size: 18em;
            color: #EEE;
        }
        .clouds.front {
            z-index: 100;
            top: 600px;
            background: #FFF;
            -moz-animation: clouds 60s linear 0s infinite;
            -webkit-animation: clouds 60s linear 0s infinite;
            animation: clouds 60s linear 0s infinite;
        }
        .clouds.front::after {
            font-size: 24em;
            color: #FFF;
        }
        .clouds::after, .clouds::before {
            letter-spacing: -0.125em;
        }

        input[type=checkbox] {
            position: absolute;
            z-index: 100;
            margin: 0.25em 60px;
            height: 20px;
            width: 60px;
        }
        input[type=checkbox] + label {
            position: absolute;
            z-index: 101;
            display: block;
            margin: 0.25em 60px;
            height: 20px;
            width: 60px;
            cursor: pointer;
        }
        input[type=checkbox] + label::before {
            display: inline-block;
            position: relative;
            pointer-events: none;
            text-indent: 0.25em;
            text-align: center;
            font-size: 20px;
            height: 30px;
            width: 90px;
            line-height: 30px;
            font-family: 'microsoft yahei',Arial,sans-serif;
            background: #777;
            border-radius: 5px;
            -moz-transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
            -o-transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
            -webkit-transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
            transition: background 0.25s ease-in-out, color 0.5s ease-in-out;
            top: -10px;
            left: -10px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox] + label::before {
                font-size: 26px;
                height: 60px;
                width: 120px;
                line-height: 60px;
            }
        }
        input[type=checkbox].show {
            top: 100px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].show {
                top: 10px;
            }
        }
        input[type=checkbox].show + label {
            top: 100px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].show + label {
                top: 10px;
            }
        }
        input[type=checkbox].show + label::before {
            content: '建筑降落';
            background: #dde;
        }
        input[type=checkbox].show:checked + label::before {
            content: '建筑发射';
            background: #466;
            color: #222;
        }
        input[type=checkbox].tower-1 {
            top: 130px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].tower-1 {
                top: 70px;
            }
        }
        input[type=checkbox].tower-1 + label {
            top: 130px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].tower-1 + label {
                top: 70px;
            }
        }
        input[type=checkbox].tower-1 + label::before {
            content: '降落';
            background: #D67;
        }
        input[type=checkbox].tower-1:checked + label::before {
            content: '升起';
            background: #a64d59;
        }
        input[type=checkbox].tower-2 {
            top: 160px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].tower-2 {
                top: 130px;
            }
        }
        input[type=checkbox].tower-2 + label {
            top: 160px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].tower-2 + label {
                top: 130px;
            }
        }
        input[type=checkbox].tower-2 + label::before {
            content: '升起';
            background: #665;
        }
        input[type=checkbox].tower-2:checked + label::before {
            content: '降落';
            background: #4d4d40;
        }
        input[type=checkbox].sunmoon {
            top: 190px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].sunmoon {
                top: 190px;
            }
        }
        input[type=checkbox].sunmoon + label {
            top: 190px;
        }
        @media only screen and (max-width: 800px) {
            input[type=checkbox].sunmoon + label {
                top: 190px;
            }
        }
        input[type=checkbox].sunmoon + label::before {
            content: '黑夜';
            background: #001C37;
            color: #FFF;
        }
        input[type=checkbox].sunmoon:checked + label::before {
            content: '白昼';
            background: #CC99FF;
            color: #000;
        }

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">

</div>

<!--[if lte IE 9]>
<style>
    #world, input, label {
        display: none !important;
    }
</style>
<h2>请使用IE10以上浏览器查看效果</h2>
<![endif]-->
<input checked='checked' class='show' id='rise-button' type='checkbox'>
<label for='rise-button'></label>
<input checked='checked' class='tower-1' id='tower-1-button' type='checkbox'>
<label for='tower-1-button'></label>
<input checked='checked' class='tower-2' id='tower-2-button' type='checkbox'>
<label for='tower-2-button'></label>
<input checked='checked' class='sunmoon' id='sunmoon-button' type='checkbox'>
<label for='sunmoon-button'></label>
<div id='world'>
    <div id='sunmoon'></div>
    <div id='towers'>
        <div class='clouds back'></div>
        <div class='tower south-east'>
            <div class='path north'>
                <div class='path west'></div>
                <div class='path north'></div>
            </div>
        </div>
        <div class='tower north-east'>
            <div class='path west spire'>
                <div class='spire-roof'></div>
                <div class='path west'>
                    <div class='path west'>
                        <div class='path west'>
                            <div class='path south'>
                                <div class='path south'>
                                    <div class='path east'>
                                        <div class='path east'>
                                            <div class='path east'>
                                                <div class='path north'></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='clouds middle'></div>
        <div class='tower north-west'>
            <div class='door'></div>
            <div class='path south spire'>
                <div class='spire-roof'></div>
                <div class='path east'>
                    <div class='path east'>
                        <div class='path east'></div>
                    </div>
                </div>
            </div>
        </div>
        <div class='tower south-west'>
            <div class='path north spire'>
                <div class='spire-roof'></div>
                <div class='path north'>
                    <div class='path east'>
                        <div class='path north'>
                            <div class='path north'>
                                <div class='path north'>
                                    <div class='path north'>
                                        <div class='path east'>
                                            <div class='path east'>
                                                <div class='path east'>
                                                    <div class='path east'>
                                                        <div class='path east'></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class='path north half-blocked-east'>
                                            <div class='path north'>
                                                <div class='path north'>
                                                    <div class='path west'>
                                                        <div class='path west'></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='clouds front'></div>
    </div>
</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>


</body>
</html>

.

猜你喜欢

转载自570109268.iteye.com/blog/2410719