div+css实现dna螺旋动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现dna螺旋动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --color-primary: #00d9ff; --color-secondary: #ec1583; --color-tertiary: #deee75; --color-quaternary: #9375ee; --color-surface: #191919; } @property --rotate-y { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @property --rotate { syntax: "<angle>"; inherits: true; initial-value: 45deg; } @property --gap { syntax: "<length>"; inherits: true; initial-value: 0; } @-webkit-keyframes dna { from { --rotate-y: 0deg; } to { --rotate-y: 360deg; } } @keyframes dna { from { --rotate-y: 0deg; } to { --rotate-y: 360deg; } } @-webkit-keyframes rotate-container { from { --rotate: 42deg; } 50% { --rotate: 142deg; } to { --rotate: 42deg; } } @keyframes rotate-container { from { --rotate: 42deg; } 50% { --rotate: 142deg; } to { --rotate: 42deg; } } .container { filter: url(#blurFilter) contrast(1.5) brightness(1.5) saturate(0.6); position: absolute; transform: scale(0.8); } .dna { --width: 11rem; --count: 42; display: flex; flex-direction: column; z-index: 1111; perspective: 50rem; -webkit-animation: dna 2.5s linear infinite, rotate-container 20s ease-in-out infinite; animation: dna 2.5s linear infinite, rotate-container 20s ease-in-out infinite; transform-style: preserve-3d; rotate: var(--rotate); transform: rotateY(var(--rotate-y, 0deg)); } @media (prefers-reduced-motion) { .dna { -webkit-animation: dna 2.5s linear infinite; animation: dna 2.5s linear infinite; } } .dna .item { display: flex; align-items: center; transform-style: preserve-3d; --a: calc(360deg / var(--count) * (var(--i))); transform: rotateY(var(--a)); } .dna .item > div { width: var(--width); height: 0.381rem; background: white; background: conic-gradient(var(--color-primary), var(--color-secondary)); transform-style: preserve-3d; } .dna .item > div:first-of-type, .dna .item > div:last-of-type { --thickness: 0.9rem; width: var(--thickness); height: var(--thickness); background: var(--color-secondary); border-radius: 50%; } @-webkit-keyframes dot-scale { from { transform: scale(1); } 50% { transform: scale(0.6); } to { transform: scale(1); } } @keyframes dot-scale { from { transform: scale(1); } 50% { transform: scale(0.6); } to { transform: scale(1); } } .dna .item > div:first-of-type::before, .dna .item > div:first-of-type::after, .dna .item > div:last-of-type::before, .dna .item > div:last-of-type::after { content: ""; position: absolute; width: calc(var(--thickness) * 0.5); border-radius: 50%; aspect-ratio: 1; transform-style: preserve-3d; } .dna .item > div:first-of-type::before, .dna .item > div:last-of-type::before { background: white; width: calc(var(--thickness) * 0.6); left: -0.4rem; top: -0.4rem; -webkit-animation: dot-scale 2s ease-in-out infinite; animation: dot-scale 2s ease-in-out infinite; } .dna .item > div:first-of-type::after, .dna .item > div:last-of-type::after { background: rgba(0, 0, 0, 0.09); right: 0.3rem; bottom: 0.3rem; } .dna .item > div:last-of-type { background: var(--color-primary); } .dna .item > div:first-of-type, .dna .item > div:last-of-type { transform: rotateY(calc(360deg / var(--count) * -1 * var(--i) - var(--rotate-y))); } .dna .item:nth-child(1) { --i: 0; } .dna .item:nth-child(2) { --i: 1; } .dna .item:nth-child(3) { --i: 2; } .dna .item:nth-child(4) { --i: 3; } .dna .item:nth-child(5) { --i: 4; } .dna .item:nth-child(6) { --i: 5; } .dna .item:nth-child(7) { --i: 6; } .dna .item:nth-child(8) { --i: 7; } .dna .item:nth-child(9) { --i: 8; } .dna .item:nth-child(10) { --i: 9; } .dna .item:nth-child(11) { --i: 10; } .dna .item:nth-child(12) { --i: 11; } .dna .item:nth-child(13) { --i: 12; } .dna .item:nth-child(14) { --i: 13; } .dna .item:nth-child(15) { --i: 14; } .dna .item:nth-child(16) { --i: 15; } .dna .item:nth-child(17) { --i: 16; } .dna .item:nth-child(18) { --i: 17; } .dna .item:nth-child(19) { --i: 18; } .dna .item:nth-child(20) { --i: 19; } .dna .item:nth-child(21) { --i: 20; } .dna .item:nth-child(22) { --i: 21; } .dna .item:nth-child(23) { --i: 22; } .dna .item:nth-child(24) { --i: 23; } .dna .item:nth-child(25) { --i: 24; } .dna .item:nth-child(26) { --i: 25; } .dna .item:nth-child(27) { --i: 26; } .dna .item:nth-child(28) { --i: 27; } .dna .item:nth-child(29) { --i: 28; } .dna .item:nth-child(30) { --i: 29; } .dna .item:nth-child(31) { --i: 30; } .dna .item:nth-child(32) { --i: 31; } .dna .item:nth-child(33) { --i: 32; } .dna .item:nth-child(34) { --i: 33; } .dna .item:nth-child(35) { --i: 34; } .dna .item:nth-child(36) { --i: 35; } .dna .item:nth-child(37) { --i: 36; } .dna .item:nth-child(38) { --i: 37; } .dna .item:nth-child(39) { --i: 38; } .dna .item:nth-child(40) { --i: 39; } .dna .item:nth-child(41) { --i: 40; } .dna .item:nth-child(42) { --i: 41; } .dna .item:nth-child(43) { --i: 42; } @-webkit-keyframes bg-gap { from { --gap: 0; } 50% { --gap: 0.2rem; } to { --gap: 0; } } @keyframes bg-gap { from { --gap: 0; } 50% { --gap: 0.2rem; } to { --gap: 0; } } body { width: 100vw; height: 100vh; display: grid; place-items: center; position: relative; font-family: "Rajdhani"; -webkit-animation: bg-gap 12s ease-in-out infinite; animation: bg-gap 12s ease-in-out infinite; background: repeating-radial-gradient(100vmin 100vmin at center, #030303 1rem, transparent calc(1.4rem + var(--gap, 0))), radial-gradient(20rem at center, color-mix(in oklch, var(--color-secondary), transparent 53%), transparent), radial-gradient(color-mix(in oklch, var(--color-secondary), transparent 93%), transparent), var(--color-surface); color: var(--color-secondary); overflow: hidden; margin: 0; } @media (prefers-reduced-motion) { body { -webkit-animation: unset; animation: unset; } } body::after { content: ""; position: absolute; opacity: 1; filter: invert(1) brightness(0.2); z-index: 1000; } a.labs-follow-me { left: 2rem; right: 2rem; bottom: 1rem; top: unset; text-align: center; } .filter { position: absolute; visibility: hidden; pointer-events: none; } * { box-sizing: border-box; } &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0