div+css实现海浪波纹动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现海浪波纹动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #fff; height: 100%; margin: 0; } :root { --offset: -40px; } :nth-child(0) { --nth: 0; } :nth-child(1) { --nth: 1; } :nth-child(2) { --nth: 2; } :nth-child(3) { --nth: 3; } :nth-child(4) { --nth: 4; } :nth-child(5) { --nth: 5; } :nth-child(6) { --nth: 6; } :nth-child(7) { --nth: 7; } :nth-child(8) { --nth: 8; } :nth-child(9) { --nth: 9; } :nth-child(10) { --nth: 10; } :nth-child(11) { --nth: 11; } :nth-child(12) { --nth: 12; } :nth-child(13) { --nth: 13; } :nth-child(14) { --nth: 14; } :nth-child(15) { --nth: 15; } :nth-child(16) { --nth: 16; } :nth-child(17) { --nth: 17; } :nth-child(18) { --nth: 18; } :nth-child(19) { --nth: 19; } :nth-child(20) { --nth: 20; } :nth-child(21) { --nth: 21; } :nth-child(22) { --nth: 22; } :nth-child(23) { --nth: 23; } :nth-child(24) { --nth: 24; } :nth-child(25) { --nth: 25; } :nth-child(26) { --nth: 26; } :nth-child(27) { --nth: 27; } :nth-child(28) { --nth: 28; } :nth-child(29) { --nth: 29; } :nth-child(30) { --nth: 30; } :nth-child(31) { --nth: 31; } :nth-child(32) { --nth: 32; } :nth-child(33) { --nth: 33; } :nth-child(34) { --nth: 34; } :nth-child(35) { --nth: 35; } :nth-child(36) { --nth: 36; } :nth-child(37) { --nth: 37; } :nth-child(38) { --nth: 38; } :nth-child(39) { --nth: 39; } :nth-child(40) { --nth: 40; } :nth-child(41) { --nth: 41; } :nth-child(42) { --nth: 42; } :nth-child(43) { --nth: 43; } :nth-child(44) { --nth: 44; } :nth-child(45) { --nth: 45; } .pattern { display: flex; position: relative; flex: 1 0; min-height: 100vh; width: 100%; } .layers { --size: 200px; --brightness: calc(100% + var(--nth) * 20%); --position: calc(100% + var(--size) + (var(--offset) * var(--nth) * 0.7)); display: flex; position: absolute; flex: 1 0; z-index: calc(100 - var(--nth)); filter: brightness(var(--brightness)); width: 100%; height: 100%; bottom: 0; background: repeat-x radial-gradient(#451792 71%, transparent 0%); background-size: var(--size) var(--size); background-position: var(--size) var(--position); } .layers:nth-child(odd) { animation: odd 20s linear infinite; } .layers:nth-child(even) { animation: even 20s linear infinite; } @k.........完整代码请登录后点击上方下载按钮下载查看
网友评论0