纯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 + 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, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0