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

2018-02-27 10:59:14来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta 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 ></div><!--[if lte IE 9]><style>    #world, input, label {        display: none !important;    }</style><h2>请使用IE10以上浏览器查看效果</h2><![endif]--><input checked='checked' id='rise-button' type='checkbox'><label for='rise-button'></label><input checked='checked' id='tower-1-button' type='checkbox'><label for='tower-1-button'></label><input checked='checked' id='tower-2-button' type='checkbox'><label for='tower-2-button'></label><input checked='checked' id='sunmoon-button' type='checkbox'><label for='sunmoon-button'></label><div id='world'>    <div id='sunmoon'></div>    <div id='towers'>        <div></div>        <div>            <div>                <div></div>                <div></div>            </div>        </div>        <div>            <div>                <div></div>                <div>                    <div>                        <div>                            <div>                                <div>                                    <div>                                        <div>                                            <div>                                                <div></div>                                            </div>                                        </div>                                    </div>                                </div>                            </div>                        </div>                    </div>                </div>            </div>        </div>        <div></div>        <div>            <div></div>            <div>                <div></div>                <div>                    <div>                        <div></div>                    </div>                </div>            </div>        </div>        <div>            <div>                <div></div>                <div>                    <div>                        <div>                            <div>                                <div>                                    <div>                                        <div>                                            <div>                                                <div>                                                    <div>                                                        <div></div>                                                    </div>                                                </div>                                            </div>                                        </div>                                        <div>                                            <div>                                                <div>                                                    <div>                                                        <div></div>                                                    </div>                                                </div>                                            </div>                                        </div>                                    </div>                                </div>                            </div>                        </div>                    </div>                </div>            </div>        </div>        <div></div>    </div></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script></body></html>

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台