音乐可视化显示效果
代码语言:html
所属分类:动画
代码描述:音乐可视化显示效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content="HTML5VisualizationPlayer"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 可视化音乐播放器</title> <style> html,body { height: 100%; margin: 0; font-family: arial,microsoft yahei; color: #fefefe } body { background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; background-color: #002878 } #fileWrapper { transition: all .5s ease } #fileWrapper:hover { opacity: 1!important } #visualizer_wrapper { text-align: center } footer { position: fixed; bottom: 2px; color: #aaa } .play-box { position: fixed; width: 1000px; height: 100px; margin: 0 auto; left: 0; right: 0; bottom: 0 } .drive,.shadows { position: fixed; top: 0; right: 0; bottom: 0; left: 0 } .drive li { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 1vw 3vw rgba(0,0,0,.5) inset; width: 100vw; height: 100vh; animation: drive 10s linear infinite; animation-direction: reverse } .shadows li { position: absolute; left: 50%; top: 50%; background: #000; width: 100vw; height: 100vh; animation: shadows 10s linear infinite; animation-direction: reverse; list-style-type: none; list-style-image: none } .drive li:nth-child(1) { animation-delay: 0 } .drive li:nth-child(2) { animation-delay: -1s } .drive li:nth-child(3) { animation-delay: -2s } .drive li:nth-child(4) { animation-delay: -3s } .drive li:nth-child(5) { animation-delay: -4s } .drive li:nth-child(6) { animation-delay: -5s } .drive li:nth-child(7) { animation-delay: -6s } .drive li:nth-child(8) { animation-delay: -7s } .drive li:nth-child(9) { animation-delay: -8s } .drive li:nth-child(10) { animation-delay: -9s } .shadows li:nth-child(1) { animation-delay: 0 } .shadows li:nth-child(2) { animation-delay: -1s } .shadows li:nth-child(3) { animation-delay: -2s } .shadows li:nth-child(4) { animation-delay: -3s } .shadows li:nth-child(5) { animation-delay: -4s } .shadows li:nth-child(6) { animation-delay: -5s } .shadows li:nth-child(7) { animation-delay: -6s } .shadows li:nth-child(8) { animation-delay: -7s } .shadows li:nth-child(9) { animation-delay: -8s } .shadows li:nth-child(10) { animation-delay: -9s } @keyframes drive { 0% { transform: translate(-50%,-50%) scale(1.05) rotate(0deg) } 100% { transform: translate(-50%,-50%) scale(0) rotate(-45deg) }} @keyframes shadows { 0% { transform: translate(-50%,-50%) scale(1.05) rotate(0deg); opacity: 0 } 100% { transform: translate(-50%,-50%) scale(0) rotate(-45deg); opacity: .25 }} @charset "utf-8";.visualizer-player { display: block; width: 100%; height: 100%; background: #272822; font-family: arial,microsoft yahei; border-radius: 3px } @font-face { font-family:icomoon;src:url(http://repo.bfw.wiki/bfwrepo/font/icomoon.ttf) format('truetype'),url(http://repo.bfw.wiki/bfwrepo/font/icomoon.woff) format('woff');font-weight:400;font-style:normal } .visualizer-player [class^=icon-],.visualizer-player [class*=" icon-"] { font-family: icomoon!important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .visualizer-player canvas .........完整代码请登录后点击上方下载按钮下载查看
网友评论0