css写椭圆,css3星球椭圆运动

html {

-ms-text-size-adjust:100%;

-webkit-text-size-adjust:100%;

}

ul,li,div,p,body {

margin:0;

padding:0;

text-align:left;

}

body,html {

background:#001424;

text-align:left;

height:100%;

width:100%;

font-family:"Microsoft YaHei","Helvetica Neue",Arial,HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;

font-size:62.5%;

font-weight:normal;

}

@-webkit-keyframes star_ani_00 {

0% {

opacity:0;

}

100% {

opacity:1;

}

}@keyframes star_ani_00 {

0% {

opacity:0;

}

100% {

opacity:1;

}

}@-webkit-keyframes star_ani_05 {

0%,100% {

-webkit-transform:translateX(0rem);

}

50% {

-webkit-transform:translateX(-26.5rem);

}

}@keyframes star_ani_05 {

0%,100% {

transform:translateX(0rem);

}

50% {

transform:translateX(-26.5rem);

}

}@-webkit-keyframes star_ani_06 {

0%,100% {

-webkit-transform:translateY(0rem) scale(0.8);

}

50% {

-webkit-transform:translateY(8rem) scale(1);

}

}@keyframes star_ani_06 {

0%,100% {

transform:translateY(0rem) scale(0.8);

}

50% {

transform:translateY(8rem) scale(1);

}

}.wrap-icon {

position:absolute;

background-size:100%;

background-repeat:no-repeat;

left:50%;

top:12%;

z-index:2;

opacity:0;

}

.wrap-icon3 {

width:2.7rem;

height:2.7rem;

margin-left:12.4rem;

margin-top:9rem;

-webkit-animation:star_ani_00 0.5s 2.5s linear forwards;

animation:star_ani_00 0.5s 2.5s linear forwards;

}

.wrap-icon3 span {

width:2.7rem;

height:2.7rem;

display:block;

-webkit-animation:star_ani_05 10s 0s ease-in-out infinite;

animation:star_ani_05 10s 0s ease-in-out infinite;

}

.wrap-icon3 i {

width:2rem;

height:2rem;

border-radius:1rem;

display:block;

background:#f60;

background-size:100% 100%;

-webkit-animation:star_ani_06 10s 2.5s ease-in-out infinite;

animation:star_ani_06 10s 2.5s ease-in-out infinite;

}

.wrap-bg {

width:28rem;

height:28rem;

position:absolute;

top:12%;

left:50%;

margin-left:-14rem;

border:0.1rem solid #aaa;

border-radius:28rem;

-webkit-transform:scale3d(1,0.3,1);

transform:scale3d(1,0.3,1);

}

.wrap-bg3 {

width:32rem;

height:32rem;

position:absolute;

top:12%;

left:50%;

margin-left:-16rem;

margin-top:-3rem;

-webkit-transform:rotate(4deg);

transform:rotate(4deg);

}

.wrap-bg3 span {

display:block;

width:100%;

height:100%;

border:0.1rem solid #aaa;

border-radius:28rem;

-webkit-transform:scale3d(0.32,1,1);

transform:scale3d(0.32,1,1);

}