css实现三维dna序列动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维dna序列动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20px; perspective: 20em; } .dna { position: relative; transform: rotate(15deg); transform-style: preserve-3d; } .link { margin: 1em auto; width: 10em; height: 1em; transform-style: preserve-3d; -webkit-animation: linkY 15s infinite linear; animation: linkY 15s infinite linear; -webkit-animation-delay: var(--iad); animation-delay: var(--iad); } .link:nth-child(1) { --iad: 0s; } .link:nth-child(2) { --iad: -0.625s; } .link:nth-child(3) { --iad: -1.25s; } .link:nth-child(4) { --iad: -1.875s; } .link:nth-child(5) { --iad: -2.5s; } .link:nth-child(6) { --iad: -3.125s; } .link:nth-child(7) { --iad: -3.75s; } .link:nth-child(8) { --iad: -4.375s; } .link:nth-child(9) { --iad: -5s; } .link:nth-child(10) { --iad: -5.625s; } .link:nth-child(11) { --iad: -6.25s; } .link:nth-child(12) { --iad: -6.875s; } .link:nth-child(13) { --iad: -7.5s; } .link:nth-child(14) { --iad: -8.125s; } .link:nth-child(15) { --iad: -8.75s; } .link:nth-child(16) { --iad: -9.375s; } .link:nth-child(17) { --iad: -10s; } .link:nth-child(18) { --iad: -10.625s; } .link:nth-child(19) { --iad: -11.25s; } .link:nth-child(20) { --iad: -11.875s; } .link:nth-child(21) { --iad: -12.5s; } .link:nth-child(22) { --iad: -13.125s; } .link:nth-child(23) { --iad: -13.75s; } .link:nth-child(24) { --iad: -14.375s; } .link:nth-child(4n+1) { --clr1: hsl(60, 100%, 75%); --clr2: hsl(240, 100%, 75%); } .link:nth-child(4n+2) { --clr1: hsl(150, 100%, 75%); --clr2: hsl(330, 100%, 75%); } .link:nth-child(4n+3) { --clr1: hsl(240, 100%, 75%); --clr2: hsl(420, 100%, 75%); } .link:nth-child(4n+4) { --clr1: hsl(330, 100%, 75%); --clr2: hsl(510, 100%, 75%); } .link > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background-image: radial-gradient(#000, #0000), linear-gradient(90deg, var(--clr1), var(--clr2)); box-shadow: 0 0 0.5em #fff7; animation: linkX 7.5s infinite linear reverse; } @-webkit-keyframes linkX { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } } @keyframes linkX { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } } .link > div:nth-child(1) { -webkit-animation-delay: calc(var(--iad) + 0s); animation-delay: calc(var(--iad) + 0s); } .link > div:nth-child(2) { -webkit-animation-delay: calc(var(--iad) + -1.875s); animation-delay: calc(var(--iad) + -1.875s); } .link > div:nth-child(3) { -webkit-animation-delay: calc(var(--iad) + -3.75s); animation-delay: calc(var(--iad) + -3.75s); } .link > div:nth-child(4) { -webkit-animation-delay: calc(var(--iad) + -5.625s); animation-delay: calc(var(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0