css3d立方体波动动画效果
代码语言:html
所属分类:三维
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Cube Wave</title> <style> @-webkit-keyframes anim-scale { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-scale { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes anim-rotate { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } @keyframes anim-rotate { to { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } :root { --ids: direction, delay, mode, view, time, gap; --length: 100; } *, *::before, *::after { margin: 0; border: 0; padding: 0; box-sizing: border-box; } #defs { height: 0; width: 0; overflow: hidden; position: absolute; } html, body, form, section, output, li, div, span { display: flex; align-items: center; flex-direction: column; justify-content: center; } section, output, ul, li, div, span { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } html { width: 100vw; height: 100vh; background: #1b2a49; } body { height: 100%; width: 100%; overflow: hidden; position: relative; background: #1b2a49; -webkit-perspective: 170vmin; perspective: 170vmin; } form.direction li:nth-of-type(n + 1):nth-of-type(-n + 11) { --delay: 0s; } form.direction li:nth-of-type(n + 11):nth-of-type(-n + 21) { --delay: 0.0555555556s; } form.direction li:nth-of-type(n + 21):nth-of-type(-n + 31) { --delay: 0.1111111111s; } form.direction li:nth-of-type(n + 31):nth-of-type(-n + 41) { --delay: 0.1666666667s; } form.direction li:nth-of-type(n + 41):nth-of-type(-n + 51) { --delay: 0.2222222222s; } form.direction li:nth-of-type(n + 51):nth-of-type(-n + 61) { --delay: 0.2777777778s; } form.direction li:nth-of-type(n + 61):nth-of-type(-n + 71) { --delay: 0.3333333333s; } form.direction li:nth-of-type(n + 71):nth-of-type(-n + 81) { --delay: 0.3888888889s; } form.direction li:nth-of-type(n + 81):nth-of-type(-n + 91) { --delay: 0.4444444444s; } form.direction li:nth-of-type(n + 91):nth-of-type(-n + 101) { --delay: 0.5s; } form.direction li:nth-of-type(n + 101):nth-of-type(-n + 111) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(1) { --delay: 0s; } form:not(.direction) li:nth-of-type(10) { --delay: 0s; } form:not(.direction) li:nth-of-type(2) { --delay: 0.0555555556s; } form:not(.direction) li:nth-of-type(11) { --delay: 0.0555555556s; } form:not(.direction) li:nth-of-type(20) { --delay: 0.0555555556s; } form:not(.direction) li:nth-of-type(3) { --delay: 0.1111111111s; } form:not(.direction) li:nth-of-type(12) { --delay: 0.1111111111s; } form:not(.direction) li:nth-of-type(21) { --delay: 0.1111111111s; } form:not(.direction) li:nth-of-type(30) { --delay: 0.1111111111s; } form:not(.direction) li:nth-of-type(4) { --delay: 0.1666666667s; } form:not(.direction) li:nth-of-type(13) { --delay: 0.1666666667s; } form:not(.direction) li:nth-of-type(22) { --delay: 0.1666666667s; } form:not(.direction) li:nth-of-type(31) { --delay: 0.1666666667s; } form:not(.direction) li:nth-of-type(40) { --delay: 0.1666666667s; } form:not(.direction) li:nth-of-type(5) { --delay: 0.2222222222s; } form:not(.direction) li:nth-of-type(14) { --delay: 0.2222222222s; } form:not(.direction) li:nth-of-type(23) { --delay: 0.2222222222s; } form:not(.direction) li:nth-of-type(32) { --delay: 0.2222222222s; } form:not(.direction) li:nth-of-type(41) { --delay: 0.2222222222s; } form:not(.direction) li:nth-of-type(50) { --delay: 0.2222222222s; } form:not(.direction) li:nth-of-type(6) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(15) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(24) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(33) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(42) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(51) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(60) { --delay: 0.2777777778s; } form:not(.direction) li:nth-of-type(7) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(16) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(25) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(34) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(43) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(52) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(61) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(70) { --delay: 0.3333333333s; } form:not(.direction) li:nth-of-type(8) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(17) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(26) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(35) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(44) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(53) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(62) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(71) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(80) { --delay: 0.3888888889s; } form:not(.direction) li:nth-of-type(9) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(18) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(27) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(36) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(45) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(54) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(63) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(72) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(81) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(90) { --delay: 0.4444444444s; } form:not(.direction) li:nth-of-type(10) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(19) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(28) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(37) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(46) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(55) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(64) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(73) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(82) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(91) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(100) { --delay: 0.5s; } form:not(.direction) li:nth-of-type(20) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(29) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(38) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(47) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(56) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(65) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(74) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(83) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(92) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(101) { --delay: 0.5555555556s; } form:not(.direction) li:nth-of-type(30) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(39) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(48) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(57) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(66) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(75) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(84) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(93) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(102) { --delay: 0.6111111111s; } form:not(.direction) li:nth-of-type(40) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(49) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(58) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(67) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(76) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(85) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(94) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(103) { --delay: 0.6666666667s; } form:not(.direction) li:nth-of-type(50) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(59) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(68) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(77) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(86) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(95) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(104) { --delay: 0.7222222222s; } form:not(.direction) li:nth-of-type(60) { --delay: 0.7777777778s; } form:not(.direction) li:nth-of-type(69) { --delay: 0.7777777778s; } form:not(.direction) li:nth-of-type(78) { --delay: 0.7777777778s; } form:not(.direction) li:nth-of-type(87) { --delay: 0.7777777778s; } form:not(.direction) li:nth-of-type(96) { --delay: 0.7777777778s; } form:not(.direction) li:nth-of-type(105) { --delay: 0.7777777778s; } form:not(.direction) li:nth-of-type(70) { --delay: 0.8333333333s; } form:not(.direction) li:nth-of-type(79) { --delay: 0.8333333333s; } form:not(.direction) li:nth-of-type(88) { --delay: 0.8333333333s; } form:not(.direction) li:nth-of-type(97) { --delay: 0.8333333333s; } form:not(.direction) li:nth-of-type(106) { --delay: 0.8333333333s; } form:not(.direction) li:nth-of-type(80) { --delay: 0.8888888889s; } form:not(.direction) li:nth-of-type(89) { --delay: 0.8888888889s; } form:not(.direction) li:nth-of-type(98) { --delay: 0.8888888889s; } form:not(.direction) li:nth-of-type(107) { --delay: 0.8888888889s; } form:not(.direction) li:nth-of-type(90) { --delay: 0.9444444444s; } form:not(.direction) li:nth-of-type(99) { --delay: 0.9444444444s; } form:not(.direction) li:nth-of-type(108) { --delay: 0.9444444444s; } form:not(.direction) li:nth-of-type(100) { --delay: 1s; } form:not(.direction) li:nth-of-type(109) { --delay: 1s; } form:not(.direction) li:nth-of-type(110) { --delay: 1.0555555556s; } form.delay { --d: 2; } form.view { --angle: 112.........完整代码请登录后点击上方下载按钮下载查看
网友评论0