vue-DNA螺旋粒子动画特效

vue-DNA螺旋粒子动画特效

html:

<div class="site-canvas" id="app">
	<div class="dna">
		<div class="dna-section" v-for="(dna,i) in sequence">
			<div class="node top"></div>
			<div class="node bottom"></div>
		</div>
	</div>
</div>

css:

body{
	background-color: #f7f7f7;
}
.site-canvas{
	position: relative;
}
.dna{
	width: 90%;
	height: 250px;
	text-align: center;
	overflow: hidden;
	outline: 1px dashed red;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.dna-section{
	width: 50px;
	height: 250px;
	display: inline-block;
	margin: 0 5px;
	position: relative;
	outline: 1px dashed blue;
}

css:

.dna-section .node{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: #5e0035;
	position: absolute;
	top: 0;
	left: 0;
}

预览效果：

css:

.dna-section .node{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: #5e0035;
	position: absolute;
	top: 0;
	left: 0;
	animation: topNode 4s ease-in-out infinite;
}
@keyframes topNode{
	0%{
		transform: scale(0.5);
		top: 0;
		z-index: 10;
		opacity: 0.75;
	}
	25%{
		transform: scale(1);
		opacity: 1;
	}
	50%{
		transform: scale(0.5);
		top: 200px;
		z-index: 0;
		opacity: 0.75;
	}
	75%{
		transform: scale(0.25);
		opacity: 0.5;
	}
	100%{
		transform: scale(0.5);
		top: 0;
		opacity: 0.75;
	}
}
.dna-section .node.bottom{
	top: auto;
	bottom: 0;
	background: #5c80bc;
	animation: bottomNode 4s ease-in-out infinite;
}
@keyframes bottomNode{
	0%{
		transform: scale(0.5);
		bottom: 0;
		opacity: 0.75;
	}
	25%{
		transform: scale(0.25);
		opacity: 0.5;
	}
	50%{
		transform: scale(0.5);
		bottom: 200px;
		opacity: 0.75;
	}
	75%{
		transform: scale(1);
		opacity: 1;
	}
	100%{
		transform: scale(0.5);
		bottom: 0;
		opacity: 0.75;
	}
}

预览效果如下所示：

html:

<div class="dna-section" v-for="(dna,i) in sequence">
	<div class="node top" v-bind:style="{'animation-delay': -(i*300) + 'ms'}"></div>
	<div class="node bottom" v-bind:style="{'animation-delay': -(i*300) + 'ms'}"></div>
</div>