JustAddMusic实现背景多色跟随音乐播放变换效果代码
代码语言:html
所属分类:多媒体
代码描述:JustAddMusic实现背景多色横条跟随音乐播放变换升降动画效果代码
代码标签: JustAddMusic 音乐 播放
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> document, body { margin: 0; background: #136; position: absolute; width: 100%; height: 100%; box-sizing: border-box; } .jam-drop { border: solid 20px #FFF; } /* draw an outline when a file is dragged over the drop target */ .jam-ui { font-size: 18px; } /* make the UI text a bit bigger than usual */ #bars, #stars { position: absolute; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } #stars { position: absolute; background: #123; background: linear-gradient(to bottom, #001 0%, #136 100%); transform: translate3D(0, 0, 0); } #bars { display: flex; flex-flow: column-reverse; align-content: stretch; align-items: stretch; } .bar { margin: 0 1px; flex: 1; } .star { position: absolute; width: 4px; height: 4px; background: #FFF; box-shadow: 0px 0px 4px white; } </style> </head> <body > <!-- uses JustAddMusic by gskinner: https://github.com/gskinner/JustAddMusic --> <div id="stars"></div> <div id="bars"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/JustAddMusic.min.js"></script> <script > // how many bars do we want to draw? Max of 128. var numBars = 48, hue=320; // add the bar elements to the container div: for (var i=0; i<nu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0