js+css实现莫比乌斯螺旋动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现莫比乌斯螺旋动画效果代码,可点击右下角调色板变色。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .mobius:nth-child(even) .block > :nth-child(-n+2)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2)::after, .mobius:nth-child(even) .block > :nth-child(-n+2)::before, .mobius:nth-child(odd) .block > :nth-child(-n+2)::before { content: ""; } .mobius:nth-child(even) .block, .mobius:nth-child(even) .block::after, .mobius:nth-child(even) .block::before, .mobius:nth-child(even) .block > :nth-child(-n+2), .mobius:nth-child(even) .block > :nth-child(-n+2)::after, .mobius:nth-child(even) .block > :nth-child(-n+2)::before, .mobius:nth-child(even), .mobius:nth-child(even) .blocks, .mobius:nth-child(odd) .block, .mobius:nth-child(odd) .block::after, .mobius:nth-child(odd) .block::before, .mobius:nth-child(odd) .block > :nth-child(-n+2), .mobius:nth-child(odd) .block > :nth-child(-n+2)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2)::before, .mobius:nth-child(odd), .mobius:nth-child(odd) .blocks, body, .scene { position: absolute; transform-style: preserve-3d; } .mobius:nth-child(even) .block, .mobius:nth-child(even) .block::after, .mobius:nth-child(even) .block::before, .mobius:nth-child(even) .block > :nth-child(-n+2), .mobius:nth-child(even) .block > :nth-child(-n+2)::after, .mobius:nth-child(even) .block > :nth-child(-n+2)::before, .mobius:nth-child(even), .mobius:nth-child(even) .blocks, .mobius:nth-child(odd) .block, .mobius:nth-child(odd) .block::after, .mobius:nth-child(odd) .block::before, .mobius:nth-child(odd) .block > :nth-child(-n+2), .mobius:nth-child(odd) .block > :nth-child(-n+2)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2)::before, .mobius:nth-child(odd), .mobius:nth-child(odd) .blocks, body, .scene { display: grid; place-self: center; } .mobius:nth-child(even) .block > *, .mobius:nth-child(even) .block::after > *, .mobius:nth-child(even) .block::before > *, .mobius:nth-child(even) .block > :nth-child(-n+2) > *, .mobius:nth-child(even) .block > :nth-child(-n+2)::after > *, .mobius:nth-child(even) .block > :nth-child(-n+2)::before > *, .mobius:nth-child(even) > *, .mobius:nth-child(even) .blocks > *, .mobius:nth-child(odd) .block > *, .mobius:nth-child(odd) .block::after > *, .mobius:nth-child(odd) .block::before > *, .mobius:nth-child(odd) .block > :nth-child(-n+2) > *, .mobius:nth-child(odd) .block > :nth-child(-n+2)::after > *, .mobius:nth-child(odd) .block > :nth-child(-n+2)::before > *, .mobius:nth-child(odd) > *, .mobius:nth-child(odd) .blocks > *, body > *, .scene > * { place-self: center; } :root { --perspective: 400vmin; } *, *::after, *::before { margin: 0; border: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; overflow: hidden; perspective: var(--perspective); background: var(--background, #000); } .themes.horizontal { width: 100vw; } .themes.vertical { height: 100vh; } .themes-trigger, .themes-menu { position: absolute; } .themes-trigger, .themes-select { height: 48px; width: 48px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; cursor: pointer; } .themes-menu { display: flex; overflow: hidden; will-change: transform; transition: transform 0.5s ease-in-out; /* width */ /* Track */ /* Handle */ /* Handle on hover */ } .themes-menu::-webkit-scrollbar-track { background: transparent; } .themes-menu::-webkit-scrollbar-thumb { background: var(--stroke, gray); border-radius: 10px; } .themes-menu::-webkit-scrollbar-thumb:hover { background: var(--hover, darkgray); } .themes.horizontal .themes-menu { flex-wrap: nowrap; overflow-x: scroll; height: 78px; width: calc(100% - 48px - 20px); bottom: 0; transform: translatey(78px); /* width */ } .themes.horizontal .themes-menu::-webkit-scrollbar { height: 10px; } .themes.vertical .themes-menu { flex-wrap: wrap; overflow-y: scroll; height: calc(100% - 48px - 20px); width: 78px; right: 0; transform: translatex(78px); /* width */ } .themes.vertical .themes-menu::-webkit-scrollbar { width: 10px; } .themes-select { flex: 0 0 48px; border: 2.5px solid var(--stroke); background: linear-gradient(var(--background) 0% 25%, var(--stroke) 25% 50%, var(--fill) 50% 75%, var(--hover) 75% 100%); } .themes.horizontal .themes-select { margin: 10px 5px; } .themes.vertical .themes-select { margin: 5px 10px; } .themes-trigger { right: 20px; bottom: 10px; background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red); } .themes-trigger, .themes-trigger::after { display: flex; justify-content: center; align-items: center; } .themes-trigger::after { content: "X"; opacity: 0; border-radius: 50%; height: 48px; width: 48px; font-size: 32px; font-weight: bold; color: #000; transition: 0.5s ease-in-out; transition-property: opacity, color; } .themes-trigger:hover::after { color: #fff; } .themes-trigger:checked::after { opacity: 1; } .themes-trigger:checked + .themes-menu { transform: translatex(0); } .themes.horizontal .themes-trigger { right: 10px; bottom: 20px; } .themes.vertical .themes-trigger { right: 20px; bottom: 10px; } :root { --mobius: 6; --side: 7.5199940139vmin; --fill: #00786e; --hover: #39ffef; --background: #00b8a9; } body { -webkit-animation: colors 20s 7.5s ease-in-out infinite; animation: colors 20s 7.5s ease-in-out infinite; } .mobius { --transform: translatez(0) scale3d(0, 0, 0); transform: var(--transform); -webkit-animation: mobius 5s var(--delay) ease-in-out forwards; animation: mobius 5s var(--delay) ease-in-out forwards; } .mobius:nth-child(odd) .blocks { --blocks: 25; } .mobius:nth-child(odd) .block { transform: var(--transform) rotate3d(0, 1, 0, var(--angle)); -webkit-animation: block 5s linear infinite; animation: block 5s linear infinite; --mode: 2; } .mobius:nth-child(odd) .block > :nth-child(-n+2) { height: 7.5199940139vmin; width: 7.5199940139vmin; } .mobius:nth-child(odd) .block > :nth-child(-n+2), .mobius:nth-child(odd) .block > :nth-child(-n+2)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2)::before { background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: var(--transform); } .mobius:nth-child(odd) .block > :nth-child(-n+2)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2)::before { transform-origin: var(--origin); } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(1) { --transform: rotatex(0deg) translatez(calc(7.5199940139vmin / 2)); } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(1)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(1)::before { height: 7.5199940139vmin; width: 7.5199940139vmin; } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(1)::after { --transform: rotatey(90deg) translatez(7.5199940139vmin); --origin: left; } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(1)::before { --transform: rotatey(-90deg) translatez(7.5199940139vmin); --origin: right; } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(2) { --transform: rotatex(180deg) translatez(calc(7.5199940139vmin / 2)); } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(2)::after, .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(2)::before { height: 7.5199940139vmin; width: 7.5199940139vmin; } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(2)::after { --transform: rotatex(90deg) translatez(7.5199940139vmin); --origin: bottom; } .mobius:nth-child(odd) .block > :nth-child(-n+2):nth-child(2)::before { --transform: rotatex(-90deg) translatez(7.5199940139vmin); --origin: top; } .mobius:nth-child(odd) .block:nth-child(1) { --angle: 0deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(2) { --angle: 14.4deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(3) { --angle: 28.8deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(4) { --angle: 43.2deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(5) { --angle: 57.6deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(6) { --angle: 72deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(7) { --angle: 86.4deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(8) { --angle: 100.8deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(9) { --angle: 115.2deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(10) { --angle: 129.6deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(11) { --angle: 144deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(12) { --angle: 158.4deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(13) { --angle: 172.8deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(14) { --angle: 187.2deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(15) { --angle: 201.6deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(16) { --angle: 216deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(17) { --angle: 230.4deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(18) { --angle: 244.8deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(19) { --angle: 259.2deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(20) { --angle: 273.6deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(21) { --angle: 288deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(22) { --angle: 302.4deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(23) { --angle: 316.8deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(24) { --angle: 331.2deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .block:nth-child(25) { --angle: 345.6deg; --transform: rotatez(var(--angle)) translatex(33.5234380464vmin); } .mobius:nth-child(odd) .face:first-child, .mobius:nth-child(odd) .face:last-child { background: var(--fill, blue); } .mobius:nth-child(odd) .face:first-child::after, .mobius:nth-child(odd) .face:first-child::before { background: var(--hover, lime); } .mobius:nth-child(odd) .face:last-child::after, .mobius:nth-child(odd) .face:last-child::before { background: var(--background, #000); } @-webkit-keyframes block { to { transform: var(--transform) rotate3d(0, 1, 0, calc(var(--angle) + 1turn)); } } @keyframes block { to { transform: var(--transform) rotate3d(0, 1, 0, calc(var(--angle) + 1turn)); } } .mobius:nth-child(even) .blocks { --blocks: 25; } .mobius:nth-child(even) .block { transform: var(--transform) rotate3d(0, 1, 0, var(--angle)); -webkit-animation: block 5s linear infinite; animation: block 5s linear infinite; --mode: 2; } .mobius:nth-child(even) .block > :nth-child(-n+2) { height: 7.5199940139vmin; width: 7.5199940139vmin; } .mobius:nth-child(even) .block > :nth-child(-n+2), .mobius:nth-child(even) .block > :nth-child(-n+2)::after, .mobius:nth-child(even) .block > :nth-child(-n+2)::before { background: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: var(--transform); } .mobius:nth-child(even) .block > :nth-child(-n+2)::after, .mobius:nth-child(even) .block > :nth-child(-n+2)::before { transform-origin: var(--origin); } .mobius:nth-chi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0