css实现正弦余弦波动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现正弦余弦波动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> body { margin: 0; height: 100vh; display: grid; place-items: center; background-color: #050505; } .grid { height: 230px; display: grid; grid-template-columns: repeat(20, 1fr); grid-column-gap: 14px; } .line { position: relative; width: 7px; height: 100%; } .line::before, .line::after { content: ''; position: absolute; width: 100%; height: 7px; border-radius: 7px; background-color: #3b44d1; } .line::before { animation: first-line ease-in-out 4s var(--delay) infinite alternate; } .line::after { bottom: 0; background-color: #dc5245; height: calc(100% - 20px); animation: second-line ease-in-out 4s var(--delay) infinite alternate; } .line:nth-child(1) { --delay: calc(-0.1s); } .line:nth-child(2) { --delay: calc(-0.2s); } .line:nth-child(3) { --delay: calc(-0.3s); } .line:nth-child(4) { --delay: calc(-0.4s); } .line:nth-child(5) { --delay: calc(-0.5s); } .line:nth-child(6) { --delay: calc(-0.6s); } .line:nth-child(7) { --delay: calc(-0.7s); } .line:nth-child(8) { --delay: calc(-0.8s); } .line:nth-child(9) { --delay: calc(-0.9s); } .line:nth-child(10) { --delay: calc(-1s); } .line:nth-child(11) { --delay: calc(-1.1s); } .line:nth-child(12) { --delay: calc(-1.2s); } .line:nth-child(13) { --delay: calc(-1.3s); } .line:nth-child(14) { --d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0