Html
    Css
    Js

    
                        
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);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3星球椭圆运动

纯css3,实现椭圆运动

1
      wlcmgg0
      2017/6/15 18:09:27

      这个效果真不错!

      回复