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); }
纯css3,实现椭圆运动