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

代码语言：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 + 10px);
}

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

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

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

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

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

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

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

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

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

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

.blueprint .bar:nth-of-type(1) {
	left: calc(-15px);
	-webkit-animation-delay: -.4s;
	animation-delay: -.4s;
}

.blueprint .bar:nth-of-type(1) .dot1,
.blueprint .bar:nth-of-type(1) .dot2,
.blueprint .bar:nth-of-type(1):after,
.blueprint .bar:nth-of-type(1):before {
	-webkit-animation-delay: -.4s;
	animation-delay: -.4s;
}

.blueprint .bar:nth-of-type(2) {
	left: calc(10px);
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s;
}

.blueprint .bar:nth-of-type(2) .dot1,
.blueprint .bar:nth-of-type(2) .dot2,
.blueprint .bar:nth-of-type(2):after,
.blueprint .bar:nth-of-type(2):before {
	-webkit-animation-delay: -.8s;
	animation-delay: -.8s;
}

.blueprint .bar:nth-of-type(3) {
	left: calc(35px);
	-webkit-animation-delay: -1.2s;
	animation-delay: -1.2s;
}

.blueprint .bar:nth-of-type(3) .dot1,
.blueprint .bar:nth-of-type(3) .dot2,
.blueprint .bar:nth-of-type(3):after,
.blueprint .bar:nth-of-type(3):before {
	-webkit-animation-delay: -1.2s;
	animation-delay: -1.2s;
}

.blueprint .bar:nth-of-type(4) {
	left: calc(60px);
	-webkit-animation-delay: -1.6s;
	animation-delay: -1.6s;
}

.blueprint .bar:nth-of-type(4) .dot1,
.blueprint .bar:nth-of-type(4) .dot2,
.blueprint .bar:nth-of-type(4):after,
.blueprint .bar:nth-of-type(4):before {
	-webkit-animation-delay: -1.6s;
	animation-delay: -1.6s;
}

.blueprint .bar:nth-of-type(5) {
	left: calc(85px);
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

.blueprint .bar:nth-of-type(5) .dot1,
.blueprint .bar:nth-of-type(5) .dot2,
.blueprint .bar:nth-of-type(5):after,
.blueprint .bar:nth-of-type(5):before {
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

.blueprint .bar:nth-of-type(6) {
	left: calc(110px);
	-webkit-animation-delay: -2.4s;
	animation-delay: -2.4s;
}

.blueprint .bar:nth-of-type(6) .dot1,
.blueprint .bar:nth-of-type(6) .dot2,
.blueprint .bar:nth-of-type(6):after,
.blueprint .bar:nth-of-type(6):before {
	-webkit-animation-delay: -2.4s;
	animation-delay: -2.4s;
}

.blueprint .bar:nth-of-type(7) {
	left: calc(135px);
	-webkit-animation-delay: -2.8s;
	animation-delay: -2.8s;
}

.blueprint .bar:nth-of-type(7) .dot1,
.blueprint .bar:nth-of-type(7) .dot2,
.blueprint .bar:nth-of-type(7):after,
.blueprint .bar:nth-of-type(7):before {
	-webkit-animation-delay: -2.8s;
	animation-delay: -2.8s;
}

.blueprint .bar:nth-of-type(8) {
	left: calc(160px);
	-webkit-animation-delay: -3.2s;
	animation-delay: -3.2s;
}

.blueprint .bar:nth-of-type(8) .dot1,
.blueprint .bar:nth-of-type(8) .dot2,
.blueprint .bar:nth-of-type(8):after,
.blueprint .bar:nth-of-type(8):before {
	-webkit-animation-delay: -3.2s;
	animation-delay: -3.2s;
}

.blueprint .bar:nth-of-type(9) {
	left: calc(185px);
	-webkit-animation-delay: -3.6s;
	animation-delay: -3.6s;
}

.blueprint .bar:nth-of-type(9) .dot1,
.blueprint .bar:nth-of-type(9) .dot2,
.blueprint .bar:nth-of-type(9):after,
.blueprint .bar:nth-of-type(9):before {
	-webkit-animation-delay: -3.6s;
	animation-delay: -3.6s;
}

.blueprint .bar:nth-of-type(10) {
	left: calc(210px);
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
}

.blueprint .bar:nth-of-type(10) .dot1,
.blueprint .bar:nth-of-type(10) .dot2,
.blueprint .bar:nth-of-type(10):after,
.blueprint .bar:nth-of-type(10):before {
	-webkit-animation-delay: -4s;
	animation-delay: -4s;
}

.blueprint .bar:nth-of-type(11) {
	left: calc(235px);
	-webkit-animation-delay: -4.4s;
	animation-delay: -4.4s;
}

.blueprint .bar:nth-of-type(11) .dot1,
.blueprint .bar:nth-of-type(11) .dot2,
.blueprint .bar:nth-of-type(11):after,
.blueprint .bar:nth-of-type(11):before {
	-webkit-animation-delay: -4.4s;
	animation-delay: -4.4s;
}

.blueprint .bar:nth-of-type(12) {
	left: calc(260px);
	-webkit-animation-delay: -4.8s;
	animation-delay: -4.8s;
}

.blueprint .bar:nth-of-type(12) .dot1,
.........完整代码请登录后点击上方下载按钮下载查看
纯css实现dna动画特效

网友评论0
