js+css实现音乐彩色频谱均衡器动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现音乐彩色频谱均衡器动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { font-family: arial, sans-serif; background-color: #000; width: 100%; height: calc(100vh - 4rem); margin: 0;}.equalizer { display: flex; justify-content: center; align-items: center; height: 10rem; margin-top: 4rem;}.equalizer-bar { width: 1.8rem; margin: 0 3px; display: flex; flex-direction: column-reverse;}.equalizer-bar span { display: block; height: 4px; border-radius: 2px; width: 100%; margin: 2px 0; background-color: #FFF; transition: .2s ease all; opacity: 1;}.equalizer-bar:nth-child(1) span { background: #fc0127;}.equalizer-bar:nth-child(2) span { background: #fb0275;}.equalizer-bar:nth-child(3) span { background: #b50cd3;}.equalizer-bar:nth-child(4) span { background: #6407e9;}.equalizer-bar:nth-child(5) span { background: #2a06a9;}.equalizer-bar:nth-child(6) span { background: #080ad7;}.equalizer-bar:nth-child(7) span { background: #0265e2;}.equalizer-bar:nth-child(8) span { background: #03fcfc;}.equalizer-bar:nth-child(9) span { background: #02fe46;}.equalizer-bar:nth-child(10) span { background: #05fb0f;}.equalizer-bar:nth-child(11) span { background: #97f611;}.equalizer-bar:nth-child(12) span { background: #f5e506;}.equalizer-bar:nth-child(13) span { background: #d7a414;}.equalizer-bar:nth-child(14) span { background: #fc6b02;}.equalizer-bar:nth-child(15) span { background: #df1506;} </style> </head> <body> <div class="equalizer"> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span></span></div> <div class="equalizer-bar"><span>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0