css实现立体波浪线条动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现立体波浪线条动画效果代码
下面为部分代码预览,完整代码请点击下载或在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: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 800px; } body * { transform-style: preserve-3d; } .scene { position: relative; -webkit-animation: scene 40s infinite linear; animation: scene 40s infinite linear; } @-webkit-keyframes scene { from { transform: rotateX(45deg) rotateZ(0deg); } to { transform: rotateX(45deg) rotateZ(360deg); } } @keyframes scene { from { transform: rotateX(45deg) rotateZ(0deg); } to { transform: rotateX(45deg) rotateZ(360deg); } } .grid { position: absolute; inset: -10em; display: grid; grid-template-columns: repeat(10, 1fr); gap: 1.5em; } .grid i { position: relative; width: 100%; height: 100%; -webkit-animation: i 5s var(--delay, 0s) infinite linear; animation: i 5s var(--delay, 0s) infinite linear; } @-webkit-keyframes i { from { transform: rotate(0deg) rotateX(30deg); } to { transform: rotate(360deg) rotateX(30deg); } } @keyframes i { from { transform: rotate(0deg) rotateX(30deg); } to { transform: rotate(360deg) rotateX(30deg); } } .grid i:nth-child(1) { --delay: 0s; } .grid i:nth-child(2) { --delay: -0.22s; } .grid i:nth-child(3) { --delay: -0.44s; } .grid i:nth-child(4) { --delay: -0.66s; } .grid i:nth-child(5) { --delay: -0.88s; } .grid i:nth-child(6) { --delay: -1.1s; } .grid i:nth-child(7) { --delay: -1.32s; } .grid i:nth-child(8) { --delay: -1.54s; } .grid i:nth-child(9) { --delay: -1.76s; } .grid i:nth-child(10) { --delay: -1.98s; } .grid i:nth-child(11) { --delay: -0.2s; } .grid i:nth-child(12) { --delay: -0.42s; } .grid i:nth-child(13) { --delay: -0.64s; } .grid i:nth-child(14) { --delay: -0.86s; } .grid i:nth-child(15) { --delay: -1.08s; } .grid i:nth-child(16) { --delay: -1.3s; } .grid i:nth-child(17) { --delay: -1.52s; } .grid i:nth-child(18) { --delay: -1.74s; } .grid i:nth-child(19) { --delay: -1.96s; } .grid i:nth-child(20) { --delay: -2.18s; } .grid i:nth-child(21) { --delay: -0.4s; } .grid i:nth-child(22) { --delay: -0.62s; } .grid i:nth-child(23) { --delay: -0.84s; } .grid i:nth-child(24) { --delay: -1.06s; } .grid i:nth-child(25) { --delay: -1.28s; } .grid i:nth-child(26) { --delay: -1.5s; } .grid i:nth-child(27) { --delay: -1.72s; } .grid i:nth-child(28) { --delay: -1.94s; } .grid i:nth-child(29) { --delay: -2.16s; } .grid i:nth-child(30) { --delay: -2.38s; } .grid i:nth-child(31) { --delay: -0.6s; } .grid i:nth-child(32) { --delay: -0.82s; } .grid i:nth-child(33) { --delay: -1.04s; } .grid i:nth-child(34) { --delay: -1.26s; } .grid i:nth-child(35) { --delay: -1.48s; } .grid i:nth-child(36) { --delay: -1.7s; } .grid i:nth-child(37) { --delay: -1.92s; } .grid i:nth-child(38) { --delay: -2.14s; } .grid i:nth-child(39) { --delay: -2.36s; } .grid i:nth-child(40) { --delay: -2.58s; } .grid i:nth-child(41) { --delay: -0.8s; } .grid i:nth-child(42) { --delay: -1.02s; } .grid i:nth-child(43) { --delay: -1.24s; } .grid i:nth-child(44) { --delay: -1.46s; } .grid i:nth-child(45) { --delay: -1.68s; } .grid i:nth-child(46) { --delay: -1.9s; } .grid i:nth-child(47) { --delay: -2.12s; } .grid i:nth-child(48) { --delay: -2.34s; } .grid i:nth-child(49) { --delay: -2.56s; } .grid i:nth-child(50) { --delay: -2.78s; } .grid i:nth-child(51) { --delay: -1s; } .grid i:nth-child(52) { --delay: -1.22s; } .grid i:nth-child(53) { --delay: -1.44s; } .grid i:nth-child(54) { --delay: -1.66s; } .grid i:nth-child(55) { --delay: -1.88s; } .grid i:nth-child(56) { --delay: -2.1s; } .grid i:nth-child(57) { --delay: -2.32s; } .grid i:nth-child(58) { --delay: -2.54s; } .grid i:nth-child(59) { --delay: -2.76s; } .grid i:nth-child(60) { --delay: -2.98s; } .grid i:nth-child(61) { --delay: -1.2s; } .grid i:nth-child(62) { --delay: -1.42s; } .grid i:nth-child(63) { --delay: -1.64s; } .grid i:nth-child(64) { --delay: -1.86s; } .grid i:nth-child(65) { --delay: -2.08s; } .grid i:nth-child(66) { --delay: -2.3s; } .grid i:nth-child(67) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0