纯css实现dna动画特效-html代码-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.........完整代码请登录后点击上方下载按钮下载查看