纯css实现dna动画特效-html代码-BFW代码库

纯css实现dna动画特效

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>(Pseudo 3D) DNA in CSS</title>
<style>
      /*! Styling */
*,
::after,
::before {
	box-sizing: inherit;
}

html {
	height: 100%;
	width: 100%;
	background: linear-gradient(to top, #232323, #151515)
}

content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.blueprint {
	min-width: 470px;
	height: 100px;
	position: relative;
}

.blueprint * {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.blueprint .dot1 {
	content: '';
	position: absolute;
	width: 100%;
	top: -25%;
	left: 0;
	height: 150%;
	z-index: 3;
	background: linear-gradient(to right, #fff, transparent 25%, transparent 75%, #fff);
	-webkit-transform: translateZ(100px);
	transform: translateZ(100px);
}

.blueprint .bar {
	width: 2px;
	height: 100%;
	position: absolute;
	background: #fff;
	background-size: 10px 20px;
	top: 0;
	-webkit-transform: rotateX(0);
	transform: rotateX(0);
	-webkit-animation: grow 8s linear infinite;
	animation: grow 8s linear infinite;
	will-change: transform;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.blueprint .bar:nth-of-type(1) .dot1,
.blueprint .bar:nth-of-type(1) .dot2 {
	width: calc(10px + 1px);
	height: calc(10px + 1px);
}

.blueprint .bar:nth-of-type(2) .dot1,
.blueprint .bar:nth-of-type(2) .dot2 {
	width: calc(10px + 2px);
	height: calc(10px + 2px);
}

.blueprint .bar:nth-of-type(3) .dot1,
.blueprint .bar:nth-of-type(3) .dot2 {
	width: calc(10px + 3px);
	height: calc(10px + 3px);
}

.blueprint .bar:nth-of-type(4) .dot1,
.blueprint .bar:nth-of-type(4) .dot2 {
	width: calc(10px + 4px);
	height: calc(10px + 4px);
}

.blueprint .bar:nth-of-type(5) .dot1,
.blueprint .bar:nth-of-type(5) .dot2 {
	width: calc(10px + 5px);
	height: calc(10px + 5px);
}

.blueprint .bar:nth-of-type(6) .dot1,
.blueprint .bar:nth-of-type(6) .dot2 {
	width: calc(10px + 6px);
	height: calc(10px + 6px);
}

.blueprint .bar:nth-of-type(7) .dot1,
.blueprint .bar:nth-of-type(7) .dot2 {
	width: calc(10px + 7px);
	height: calc(10px + 7px);
}

.blueprint .bar:nth-of-type(8) .dot1,
.blueprint .bar:nth-of-type(8) .dot2 {
	width: calc(10px + 8px);
	height: calc(10px + 8px);
}

.blueprint .bar:nth-of-type(9) .dot1,
.blueprint .bar:nth-of-type(9) .dot2 {
	width: calc(10px + 9px);
	height: calc(10px + 9px);
}

.blueprint .bar:nth-of-type(10) .dot1,
.blueprint .bar:nth-of-type(10) .dot2 {
	width: calc(10px + 10px);
	height: calc(10px .........完整代码请登录后点击上方下载按钮下载查看