html 地球 线条,HTML5 独一无二的地球指环

CSS

语言：

CSSSCSS

确定

body {

background: #050505;

overflow: hidden;

-webkit-perspective: 2000px;

perspective: 2000px;

padding-top: 250px;

}

.ring {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

position: absolute;

left: 35%;

width: 80px;

height: 30px;

margin-left: -50px;

-webkit-transform-origin: 50% 50% 398px;

-ms-transform-origin: 50% 50% 398px;

transform-origin: 50% 50% 398px;

-webkit-animation: spin 60s linear infinite;

animation: spin 60s linear infinite;

}

.inner,

.outer {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateY(30deg);

transform: rotateY(30deg);

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

.inner .section,

.outer .section {

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

position: absolute;

width: 100%;

height: 100%;

-webkit-transform-origin: center top;

-ms-transform-origin: center top;

transform-origin: center top;

-webkit-transform: rotateX(7.2deg);

transform: rotateX(7.2deg);

top: 100%;

}

.inner .section-1,

.outer .section-1 {

background-position: left -50px;

}

.inner .section-2,

.outer .section-2 {

background-position: left -100px;

}

.inner .section-3,

.outer .section-3 {

background-position: left -150px;

}

.inner .section-4,

.outer .section-4 {

background-position: left -200px;

}

.inner .section-5,

.outer .section-5 {

background-position: left -250px;

}

.inner .section-6,

.outer .section-6 {

background-position: left -300px;

}

.inner .section-7,

.outer .section-7 {

background-position: left -350px;

}

.inner .section-8,

.outer .section-8 {

background-position: left -400px;

}

.inner .section-9,

.outer .section-9 {

background-position: left -450px;

}

.inner .section-10,

.outer .section-10 {

background-position: left -500px;

}

.inner .section-11,

.outer .section-11 {

background-position: left -550px;

}

.inner .section-12,

.outer .section-12 {

background-position: left -600px;

}

.inner .section-13,

.outer .section-13 {

background-position: left -650px;

}

.inner .section-14,

.outer .section-14 {

background-position: left -700px;

}

.inner .section-15,

.outer .section-15 {

background-position: left -750px;

}

.inner .section-16,

.outer .section-16 {

background-position: left -800px;

}

.inner .section-17,

.outer .section-17 {

background-position: left -850px;

}

.inner .section-18,

.outer .section-18 {

background-position: left -900px;

}

.inner .section-19,

.outer .section-19 {

background-position: left -950px;

}

.inner .section-20,

.outer .section-20 {

background-position: left -1000px;

}

.inner .section-21,

.outer .section-21 {

background-position: left -1050px;

}

.inner .section-22,

.outer .section-22 {

background-position: left -1100px;

}

.inner .section-23,

.outer .section-23 {

background-position: left -1150px;

}

.inner .section-24,

.outer .section-24 {

background-position: left -1200px;

}

.inner .section-25,

.outer .section-25 {

background-position: left -1250px;

}

.inner .section-26,

.outer .section-26 {

background-position: left -1300px;

}

.inner .section-27,

.outer .section-27 {

background-position: left -1350px;

}

.inner .section-28,

.outer .section-28 {

background-position: left -1400px;

}

.inner .section-29,

.outer .section-29 {

background-position: left -1450px;

}

.inner .section-30,

.outer .section-30 {

background-position: left -1500px;

}

.inner .section-31,

.outer .section-31 {

background-position: left -1550px;

}

.inner .section-32,

.outer .section-32 {

background-position: left -1600px;

}

.inner .section-33,

.outer .section-33 {

background-position: left -1650px;

}

.inner .section-34,

.outer .section-34 {

background-position: left -1700px;

}

.inner .section-35,

.outer .section-35 {

background-position: left -1750px;

}

.inner .section-36,

.outer .section-36 {

background-position: left -1800px;

}

.inner .section-37,

.outer .section-37 {

background-position: left -1850px;

}

.inner .section-38,

.outer .section-38 {

background-position: left -1900px;

}

.inner .section-39,

.outer .section-39 {

background-position: left -1950px;

}

.inner .section-40,

.outer .section-40 {

background-position: left -2000px;

}

.inner .section-41,

.outer .section-41 {

background-position: left -2050px;

}

.inner .section-42,

.outer .section-42 {

background-position: left -2100px;

}

.inner .section-43,

.outer .section-43 {

background-position: left -2150px;

}

.inner .section-44,

.outer .section-44 {

background-position: left -2200px;

}

.inner .section-45,

.outer .section-45 {

background-position: left -2250px;

}

.inner .section-46,

.outer .section-46 {

background-position: left -2300px;

}

.inner .section-47,

.outer .section-47 {

background-position: left -2350px;

}

.inner .section-48,

.outer .section-48 {

background-position: left -2400px;

}

.inner .section-49,

.outer .section-49 {

background-position: left -2450px;

}

.inner .section-50,

.outer .section-50 {

background-position: left -2500px;

}

.inner {

z-index: 2;

}

.inner .section {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

background-image: url(/uploads/160101/halo-inner.jpg);

}

.outer {

z-index: 1;

}

.outer .section {

background-image: url(/uploads/160101/halo-outer.jpg);

}

@-webkit-keyframes spin {

100% {

-webkit-transform: rotateY(-1turn);

transform: rotateY(-1turn);

}

}

@keyframes spin {

100% {

-webkit-transform: rotateY(-1turn);

transform: rotateY(-1turn);

}

}