Html
    Css
    Js

    
                        
#app {
	position:relative;
}
.outer {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	text-align:center;
	overflow:hidden;
	width:90%;
}
.inner {
	position:relative;
	width:50px;
	height:250px;
	display:inline-block;
}
.inner div {
	position:absolute;
	width:50px;
	height:50px;
	border-radius:50%;
}
.top {
	top:0;
	background-color:yellowgreen;
	-webkit-animation:5s topNode ease-in-out infinite;
	animation:5s topNode ease-in-out infinite;
}
.foot {
	bottom:0;
	background-color:royalblue;
	-webkit-animation:5s footNode ease-in-out infinite;
	animation:5s footNode ease-in-out infinite;
}
@-webkit-keyframes topNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
25% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	top:200px;
}
75% {
	transform:scale(0.25);
	opacity:0.5;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
}@keyframes topNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
25% {
	transform:scale(1);
	opacity:1;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	top:200px;
}
75% {
	transform:scale(0.25);
	opacity:0.5;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	top:0;
}
}@-webkit-keyframes footNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
25% {
	transform:scale(0.25);
	opacity:0.5;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:200px;
}
75% {
	transform:scale(1);
	opacity:1;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
}@keyframes footNode {
	0% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
25% {
	transform:scale(0.25);
	opacity:0.5;
}
50% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:200px;
}
75% {
	transform:scale(1);
	opacity:1;
}
100% {
	transform:scale(0.5);
	opacity:0.75;
	bottom:0;
}
}#line {
	width:0;
	height:145px;
	border:2px solid transparent;
	border-radius:0px;
	opacity:0.5;
	background-color:#CCCCCC;
	top:50px;
	left:23px;
	bottom:50px;
	-webkit-animation:5s lineNode linear infinite;
	animation:5s lineNode linear infinite;
}
@keyframes lineNode {
	0% {
	transform:scale(0.5);
	transform:rotateX(0deg);
}
100% {
	transform:scale(1);
	transform:rotateX(360deg);
}
}

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

css3加 vue制作DNA

0