js+css实现一个三维圆柱可调参数音乐声音音频可视化动画效果代码
代码语言:html
所属分类:多媒体
代码描述:js+css实现一个三维圆柱可调参数音乐声音音频可视化动画效果代码,选择本地声音文件,就可以看到圆柱跳动动画效果,还可调节圆柱的参数实现不同的效果。
代码标签: js cs 三维 圆柱 音乐 声音 音频 可视化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Default all same color */ * { box-sizing: border-box; } html, body { height: 100%; } body { background: #1e1e1e; font-family: "Helvatica", sans-serif; color: #FFF; position: relative; perspective: 1000px; perspective-origin: 50% 50%; } .hide { display: none; } .faded { opacity: 0; } .prism { position: absolute; transform-style: preserve-3d; will-change: transform; } .side { width: 100%; height: 100%; border-top: 3px solid #4DA16F; border-bottom: 3px solid #4DA16F; border-color: currentColor; position: absolute; } .rectangle { border: 3px solid #4DA16F; border-color: currentColor; transition: opacity 150ms; } .solid .rectangle { background: currentColor; } @keyframes rotate { from { transform: rotateY(0); } to { transform: rotateY(-360deg); } } .musicControls, label { position: absolute; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.3); padding: 10px; } .musicControls { top: 20px; left: 20px; } label { left: 20px; top: 100px; font-style: italic; } body.loaded #loading { display: none; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="musicControls"> <input id="audiofile" type="file" /> <button class="playPauseButton">▶</button> </div> <label id="loading" for="audiofile">选择本地音乐文件</label> <!-- This should match the values in the js--> <div class="prism"> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> </div> <div class="side hide"> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div class="rectangle hide"></div> <div .........完整代码请登录后点击上方下载按钮下载查看
网友评论0