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