经常玩手机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>
.