html5 css3 世界地图,HTML5 CSS3南极的世界

CSS

语言：

CSSSCSS

确定

body {

background: white;

margin: 0;

}

.contenedor {

padding-top: 30px;

width: 100%;

height: 850px;

position: relative;

background: #c8cacb;

margin: 30px auto;

overflow: hidden;

}

ul.mountains {

display: block;

width: 100%;

height: 300px;

list-style: none;

margin: 0px 0px;

}

ul.mountains li {

display: inline-block;

margin-left: 30px;

}

ul.mountains li:nth-child(1) {

width: 0;

height: 0;

border-bottom: 200px solid white;

border-left: 150px solid transparent;

}

ul.mountains li:nth-child(2) {

width: 0;

height: 0;

border-bottom: 300px solid white;

border-left: 200px solid transparent;

}

ul.mountains li:nth-child(3) {

width: 0;

height: 0;

border-bottom: 250px solid white;

border-left: 165px solid transparent;

}

ul.mountains6 {

margin-top: -1200px;

display: block;

width: 90%;

height: 600px;

list-style: none;

margin: -300px 209px;

}

ul.mountains6 li {

display: inline-block;

width: 0;

height: 0;

border-bottom: 50px solid black;

border-right: 100px solid transparent;

}

ul.mountains6 li:nth-child(1) {

width: 0;

height: 0;

border-right: 150px solid transparent;

border-bottom: 200px solid #9dadb7;

margin: 0px -27px;

}

ul.mountains6 li:nth-child(1)::before {

content: "";

display: block;

width: 0;

height: 0;

border-bottom: 60px solid white;

border-left: 32px solid transparent;

margin: -4px -32px;

}

ul.mountains6 li:nth-child(1)::after {

content: "";

display: block;

width: 0;

height: 0;

border-bottom: 60px solid #9dadb7;

border-right: 30px solid transparent;

margin: -60px -1px;

}

ul.mountains6 li:nth-child(2) {

width: 0;

height: 0;

border-right: 200px solid transparent;

border-bottom: 300px solid #9dadb7;

margin: 0px 103px;

}

ul.mountains6 li:nth-child(3) {

width: 0;

height: 0;

border-right: 165px solid transparent;

border-bottom: 250px solid #9dadb7;

margin: 0px -107px;

}

.flat {

position: absolute;

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid #9dadb7;

border-bottom: 50px solid transparent;

margin: -112px 162px;

}

.flat::before {

content: "";

display: block;

width: 0;

height: 0;

border-left: 90px solid transparent;

border-right: 50px solid transparent;

border-bottom: 165px solid white;

margin: -103px 228px;

}

.flat::after {

content: "";

display: block;

width: 0;

height: 0;

border-bottom: 112px solid white;

border-right: 80px solid transparent;

margin: -112px 490px;

}

.hills {

position: relative;

width: 474px;

height: 241px;

border-radius: 300px 300px 0 0;

-moz-border-radius: 300px 300px 0 0;

background: white;

margin: -335px 717px;

z-index: 333;

}

.hills::before {

content: "";

display: block;

width: 385px;

height: 240px;

border-radius: 300px 300px 0 0;

-moz-border-radius: 300px 300px 0 0;

background: white;

margin: -271px 281px;

}

.hills::after {

content: "";

display: block;

width: 521px;

height: 261px;

border-radius: 300px 300px 0 0;

-moz-border-radius: 300px 300px 0 0;

background: white;

margin: -271px 503px;

}

.hills3 {

position: absolute;

width: 425px;

height: 241px;

border-radius: 300px 300px 0 0;

-moz-border-radius: 300px 300px 0 0;

background: #e7e8e9;

margin: 80px 743px;

}

.hills3::before {

content: "";

display: block;

width: 385px;

height: 240px;

border-radius: 300px 300px 0 0;

-moz-border-radius: 300px 300px 0 0;

background: #e7e8e9;

margin: -3px 261px;

}

.hills3::after {

content: "";

display: block;

width: 507px;

height: 261px;

border-radius: 300px 300px 0 0;

-moz-border-radius: 300px 300px 0 0;

background: #e7e8e9;

margin: -271px 480px;

}

.lake {

position: absolute;

width: 100%;

height: 800px;

background: rgba(255, 255, 255, 1);

background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(225, 238, 247, 1) 55%, rgba(138, 167, 186, 1) 100%);

background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(43%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(225, 238, 247, 1)), color-stop(100%, rgba(138, 167, 186, 1)));

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(225, 238, 247, 1) 55%, rgba(138, 167, 186, 1) 100%);

background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(225, 238, 247, 1) 55%, rgba(138, 167, 186, 1) 100%);

background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 43%, rgba(225, 238, 247, 1) 55%, rgba(138, 167, 186, 1) 100%);

margin: 300px 0px;

}

.ani {

-webkit-animation: sail 60s ease-in-out infinite;

-moz-animation: sail 60s ease-in-out infinite;

animation: sail 60s ease-in-out infinite;

position: relative;

}

.base {

position: absolute;

display: block;

width: 201px;

height: 40px;

border-radius: 100%;

background: rgba(255, 255, 255, .3);

margin: 118px -60px;

transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);

-webkit-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);

-moz-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);

-o-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);

-ms-transform: rotate(6deg) scale(0.407) skew(-72deg) translate(-45px);

}

@-webkit-keyframes resbalar {

0% {

left: 0%;

-webkit-transform: rotate(21deg);

-moz-transform: rotate(21deg);

-ms-transform: rotate(21deg);

-o-transform: rotate(21deg);

transform: rotate(21deg);

}

50% {

left: 121%;

}

100% {

left: 0%;

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

}

@-moz-keyframes resbalar {

0% {

left: 0%;

-webkit-transform: rotate(21deg);

-moz-transform: rotate(21deg);

-ms-transform: rotate(21deg);

-o-transform: rotate(21deg);

transform: rotate(21deg);

}

50% {

left: 121%;

}

100% {

left: 0%;

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

}

@keyframes resbalar {

0% {

left: 0%;

-webkit-transform: rotate(21deg);

-moz-transform: rotate(21deg);

-ms-transform: rotate(21deg);

-o-transform: rotate(21deg);

transform: rotate(21deg);

}

50% {

left: 121%;

}

100% {

left: 0%;

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

}

@-webkit-keyframes bailar {

0% {

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

50% {

-webkit-transform: rotate(21deg);

-moz-transform: rotate(21deg);

-ms-transform: rotate(21deg);

-o-transform: rotate(21deg);

transform: rotate(21deg);

}

100% {

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

}

@-moz-keyframes bailar {

0% {

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

50% {

-webkit-transform: rotate(21deg);

-moz-transform: rotate(21deg);

-ms-transform: rotate(21deg);

-o-transform: rotate(21deg);

transform: rotate(21deg);

}

100% {

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

}

@keyframes bailar {

0% {

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

50% {

-webkit-transform: rotate(21deg);

-moz-transform: rotate(21deg);

-ms-transform: rotate(21deg);

-o-transform: rotate(21deg);

transform: rotate(21deg);

}

100% {

-webkit-transform: rotate(-21deg);

-moz-transform: rotate(-21deg);

-ms-transform: rotate(-21deg);

-o-transform: rotate(-21deg);

transform: rotate(-21deg);

}

}

.pingui {

position: absolute;

width: 121px;

height: 121px;

margin: 312px -321px;

-webkit-animation: resbalar 12s linear infinite;

-moz-animation: resbalar 12s linear infinite;

animation: resbalar 12s linear infinite;

}

.foc {

position: absolute;

width: 121px;

height: 121px;

margin: 439px 873px;

}

.pinguino {

position: absolute;

width: 90px;

height: 90px;

border-radius: 100%;

background: black;

margin: 90px 45px;

}

.pinguino::before {

content: "";

display: block;

width: 75px;

height: 70px;

border-radius: 100%;

background: black;

margin: -50px 7px;

}

.ping {

position: absolute;

width: 80px;

height: 80px;

border-radius: 100%;

background: rgba(255, 255, 255, 1);

background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(230, 230, 230, 1) 100%);

background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(51%, rgba(230, 230, 230, 1)), color-stop(100%, rgba(230, 230, 230, 1)));

background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(230, 230, 230, 1) 100%);

background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(230, 230, 230, 1) 100%);

background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(230, 230, 230, 1) 100%);

background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(230, 230, 230, 1) 51%, rgba(230, 230, 230, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=1);

margin: 30px 5px;

z-index: 3;

}

.ping::after {

content: "";

display: block;

width: 12px;

height: 7px;

border-radius: 12px 12px 0 0;

background: rgba(255, 146, 10, 1);

background: -moz-linear-gradient(left, rgba(255, 146, 10, 1) 0%, rgba(255, 146, 10, 1) 50%, rgba(255, 175, 75, 1) 50%, rgba(255, 175, 75, 1) 100%);

background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 146, 10, 1)), color-stop(50%, rgba(255, 146, 10, 1)), color-stop(50%, rgba(255, 175, 75, 1)), color-stop(100%, rgba(255, 175, 75, 1)));

background: -webkit-linear-gradient(left, rgba(255, 146, 10, 1) 0%, rgba(255, 146, 10, 1) 50%, rgba(255, 175, 75, 1) 50%, rgba(255, 175, 75, 1) 100%);

background: -o-linear-gradient(left, rgba(255, 146, 10, 1) 0%, rgba(255, 146, 10, 1) 50%, rgba(255, 175, 75, 1) 50%, rgba(255, 175, 75, 1) 100%);

background: -ms-linear-gradient(left, rgba(255, 146, 10, 1) 0%, rgba(255, 146, 10, 1) 50%, rgba(255, 175, 75, 1) 50%, rgba(255, 175, 75, 1) 100%);

background: linear-gradient(to right, rgba(255, 146, 10, 1) 0%, rgba(255, 146, 10, 1) 50%, rgba(255, 175, 75, 1) 50%, rgba(255, 175, 75, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff920a', endColorstr='#ffaf4b', GradientType=1);

margin: -30px 33px;

}

.ping::before {

content: "";

display: block;

width: 0;

height: 0;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-top: 14px solid rgba(255, 146, 10, 1);

margin: 9px 33px;

}

.ojos {

position: absolute;

width: 14px;

height: 14px;

border-radius: 100%;

background: black;

border: 12px solid white;

margin: 60px 54px;

}

.ojos::before {

content: "";

display: block;

width: 14px;

height: 14px;

border-radius: 100%;

background: black;

border: 12px solid white;

margin: -12px 21px;

}

.iris {

position: absolute;

width: 7px;

height: 7px;

border-radius: 100%;

background: white;

margin: -12px 0px;

}

.iris::before {

content: "";

display: block;

width: 7px;

height: 7px;

border-radius: 100%;

background: white;

margin: 0px 40px;

}

.alas {

position: absolute;

width: 12px;

height: 50px;

border-radius: 0px 0 0 12px;

background: black;

margin: 121px 37px;

transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

}

.alas::before {

content: "";

display: block;

width: 12px;

height: 50px;

border-radius: 0px 0 12px 0px;

background: black;

margin: -47px 80px;

transform: rotate(-60deg);

-webkit-transform: rotate(-60deg);

-moz-transform: rotate(-60deg);

-ms-transform: rotate(-60deg);

-o-transform: rotate(-60deg);

}

.patas {

position: absolute;

width: 21px;

height: 12px;

border-radius: 30px 30px 0 0;

background: #f39e3a;

margin: 172px 60px;

}

.patas::before {

content: "";

display: block;

width: 21px;

height: 12px;

border-radius: 30px 30px 0 0;

background: #f39e3a;

margin: 0px 40px;

}

.foca {

position: absolute;

width: 90px;

height: 90px;

border-radius: 100%;

background: -webkit-gradient(left top, right top, color-stop(0%, rgba(92, 90, 92, 1)), color-stop(50%, rgba(92, 90, 92, 1)), color-stop(50%, rgba(100, 100, 102, 1)), color-stop(100%, rgba(100, 100, 102, 1)));

background: -webkit-linear-gradient(left, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

background: -o-linear-gradient(left, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

background: -ms-linear-gradient(left, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

background: linear-gradient(to right, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5c5a5c', endColorstr='#646466', GradientType=1);

-webkit-animation: bailar 12s alternate infinite;

-moz-animation: bailar 12s alternate infinite;

animation: bailar 12s alternate infinite;

margin: 85px 50px;

}

.foca::before {

content: "";

display: block;

width: 95px;

height: 95px;

border-radius: 100%;

background: -webkit-gradient(left top, right top, color-stop(0%, rgba(92, 90, 92, 1)), color-stop(50%, rgba(92, 90, 92, 1)), color-stop(50%, rgba(100, 100, 102, 1)), color-stop(100%, rgba(100, 100, 102, 1)));

background: -webkit-linear-gradient(left, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

background: -o-linear-gradient(left, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

background: -ms-linear-gradient(left, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

background: linear-gradient(to right, rgba(92, 90, 92, 1) 0%, rgba(92, 90, 92, 1) 50%, rgba(100, 100, 102, 1) 50%, rgba(100, 100, 102, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5c5a5c', endColorstr='#646466', GradientType=1);

margin: -60px -3px;

}

.cone::after {

content: "";

display: block;

width: 21px;

height: 21px;

border-radius: 100%;

background: black;

z-index: 3;

margin: -30px 17px;

}

.cone {

position: absolute;

width: 30px;

height: 30px;

border-radius: 100%;

background: #ccc;

z-index: 3;

margin: 30px 17px;

}

.cone::before {

content: "";

display: block;

width: 30px;

height: 30px;

border-radius: 100%;

background: #ccc;

z-index: 3;

margin: 0px 25px;

}

.conojos {

position: absolute;

width: 17px;

height: 17px;

border-radius: 100%;

background: black;

margin: 5px 14px;

}

.conojos::before {

content: "";

display: block;

width: 17px;

height: 17px;

border-radius: 100%;

background: black;

margin: 0px 45px;

}

.ciris {

position: absolute;

width: 6px;

height: 6px;

border-radius: 100%;

background: white;

margin: -14px 7px;

}

.ciris::before {

content: "";

display: block;

width: 6px;

height: 6px;

border-radius: 100%;

background: white;

margin: 0px 43px;

}

.fpatas {

position: absolute;

width: 50px;

height: 12px;

border-radius: 50% 50% 0 0;

background: #333;

margin: 162px 30px;

-webkit-animation: arriba 21s alternate infinite;

-moz-animation: arriba 21s alternate infinite;

animation: arriba 21s alternate infinite;

}

.fpatas::before {

content: "";

display: block;

width: 50px;

height: 12px;

border-radius: 50% 50% 0 0;

background: #333;

margin: 0px 80px;

}

.bigotes {

position: absolute;

width: 50px;

height: 50px;

border-radius: 100%;

border-top: 1px solid blacK;

margin: -75px 40px;

z-index: 3;

}

.bigotes::before {

content: "";

display: block;

width: 50px;

height: 50px;

border-radius: 100%;

border-top: 1px solid blacK;

margin: -5px 0px;

z-index: 3;

}

.bigotes::after {

content: "";

display: block;

width: 50px;

height: 50px;

border-radius: 100%;

border-top: 1px solid blacK;

margin: -43px 0px;

z-index: 3;

}

.nube {

position: absolute;

width: 50px;

height: 50px;

border-radius: 100%;

background: white;

margin: 90px -121px;

animation: cloud 30s linear infinite;

-moz-animation: cloud 30s linear infinite;

/* Firefox */

-webkit-animation: cloud 30s linear infinite;

/*Safari y Chrome*/

-o-animation: cloud 30s linear infinite;

}

.nube::before {

content: "";

display: block;

width: 50px;

height: 50px;

border-radius: 100%;

background: white;

margin: -21px 19px;

}

.nube::after {

content: "";

display: block;

width: 50px;

height: 50px;

border-radius: 100%;

background: white;

margin: -30px 39px;

}

@-webkit-keyframes cloud {

from {

left: -50%

}

to {

left: 152%

}

@-moz-keyframes cloud {

from {

left: -50%

}

to {

left: 152%

}

@keyframes cloud {

from {

left: -50%

}

to {

left: 152%

}