用HTML实现旋转地球,使用CSS3和贴图实现的旋转的蓝色地球

CSS

语言：

CSSSCSS

确定

body {

background: #000 url('/uploads/160801/bg_space.png');

}

.planet {

width: 280px;

height: 280px;

background: #07132f;

border-radius: 150px;

position: absolute;

left: 50%;

top: 50%;

margin-left: -140px;

margin-top: -140px;

overflow: hidden;

box-shadow: 0px 0px 55px rgba(20, 100, 255, 0.7);

border: 1px solid #0089dd;

border-right: none;

-webkit-transform: rotateZ(15deg);

transform: rotateZ(15deg)

}

.planet:after {

content: "";

width: 90px;

height: 100%;

background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));

position: absolute;

right: 0;

}

.planet:before {

content: "";

width: 90px;

height: 100%;

background: linear-gradient(to right, rgba(10, 130, 255, 0.6), rgba(0, 0, 0, 0));

position: absolute;

left: 0;

z-index: 3;

}

.texture {

position: absolute;

left: -360px;

-webkit-animation: rotation 30s linear infinite;

animation: rotation 30s linear infinite;

content: url(/uploads/160801/earth_copy.jpg);

height: 320px;

background-size: cover;

}

@keyframes rotation {

0% {

left: -845px;

}

100% {

left: -185px;

}

}

@-webkit-keyframes rotation {

0% {

left: -845px;

}

100% {

left: -185px;

}

}