css实现音频频谱动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现音频频谱动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Global Reset */ * { font-family: 'Allerta', arial, Tahoma; box-sizing: border-box; } body { background: linear-gradient(to left, #7700aa, #8800ff); text-align:center; color:#fff; } h3{ text-shadow:1px 1px 1px #fff; } /* Start styling the page */ .container-audio { width: 66%; height: auto; padding: 20px; border-radius: 5px; background-color: #eee; color: #444; margin: 20px auto; overflow: hidden; } audio { width:100%; } audio:nth-child(2), audio:nth-child(4), audio:nth-child(6) { margin: 0; } .container-audio .colum1 { width: 23px; height: 5em; border-radius: 5px; margin: 0 10px 0 0; display: inline-block; position: relative; } .container-audio .colum1:last-child { margin: 0; } .container-audio .colum1 .row { width: 100%; height: 100%; border-radius: 5px; background: linear-gradient(to up, #7700aa, #8800ff); position: absolute; -webkit-animation: Rofa 10s infinite ease-in-out; animation: Rofa 10s infinite ease-in-out; bottom: 0; } .container-audio .colum1:nth-of-type(1) .row { -webkit-animation-delay: 3.99s; animation-delay: 3.99s; } .container-audio .colum1:nth-of-type(2) .row { -webkit-animation-delay: 3.80s; animation-delay: 3.80s; } .container-audio .colum1:nth-of-type(3) .row { -webkit-animation-delay: 3.70s; animation-delay: 3.70s; } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0