css模拟音频竖条上下波动动画效果代码
代码语言:html
所属分类:动画
代码描述:css模拟音频竖条上下波动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0px; padding: 0px; border: 0px; } html, body { min-height: 100%; } body { background: radial-gradient(#eeeeee, #444444); } .loader { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; width: 175px; height: 100px; } .loader span { display: block; background: #ccc; width: 7px; height: 10%; border-radius: 14px; margin-right: 5px; float: left; margin-top: 25%; } .loader span:last-child { margin-right: 0px; } .loader span:nth-child(1) { animation: load 2.5s 1.4s infinite linear; } .loader span:nth-child(2) { animation: load 2.5s 1.2s infinite linear; } .loader span:nth-child(3) { animation: load 2.5s 1s infinite linear; } .loader span:nth-child(4) { animation: load 2.5s 0.8s infinite linear; } .loader span:nth-child(5) { animation: load 2.5s 0.6s infinite linear; } .loader span:nth-child(6) { animation: load 2.5s 0.4s infinite linear; } .loader span:nth-child(7) { animation: load 2.5s 0.2s infinite linear; } .loader span:nth-child(8) { animation: load 2.5s 0s infinite linear; } .loader span:nth-child(9) { animation: load 2.5s 0.2s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0