html,bodyheight100%width100%max-width600pxmargin0auto.clearclearboth#appfont-family'微软雅黑','\5FAE\8F6F\96C5\9ED1'font-weightlighter-webkit-font-smoothingantialiased-moz-osx-font-smoothinggrayscalecolor#2c3e50高度100%宽度100%溢出隐藏.list宽度100%高度60pxline-height60pxbackground#F2F2F2border-bottom1px#333solidspanpadding-left20pxdisplayinline-blockcolordarkblue&>显示块向右浮动&>imgmargin-top8pxwidth40px.p??layerwidth100%max-width600px高度30%不透明度.8位置固定背景#F2F2F2border-top3px#000solidborder-bottom10pxbrownsolidbottom0font-size0border-top-left-radius50%border-top-right-radius50%text-aligncenterdisplayflex.icoflex1padding-top50pxtext-aligncenter#playwidth60%max-width64pxmargin-top35pxdisplaynone#stopmargin-top35px宽度60%max-width64px&>imgborder0width32pxvertical-alignmiddle.musicwidth100%height100%backgroundurl("./assets/player/bg.jpg")positionrelativetop0left0.textwidth100%text-aligncenterpadding-top5%font-size30pxspanfont-size14pxdisplayblockline-height2.imgwidth200pxheight200pxborder-radius50%background#333margin0autopositionabsoluteoutlinenone底部46%left50%transformtranslateX(-100px)&>img宽度90%height90%padding5%border-radius50%animation:rotation10slinearinfinite;-moz-动画：旋转10s线性无限；-webkit-animation:旋转10s线性无限；-o-动画：旋转10s线性无限；.songList位置：固定；顶部：0；z-指数：100；宽度：100%；最大宽度600px边距0自动高度：100%；溢出：自动；过渡：所有.5s；背景：rgba（7、17、27、.4）；背景滤镜：模糊（10px）；/*ios模糊背景*/.itemsbackground#ffffffwidth100%height55%margin0autopadding60px000overflowautoborder-bottom2px#000solid.titlewidth100%max-width600pxheight50pxline-height50pxbackground#FFFborder-bottom1px#DDDsolidtext-aligncenterpadding-top10pxfont-size18pxpositionfixedtop0#closefloatrightwidth40px&>imgwidth40px.itemwidth100%margin0autoborder-top1px#EEEsolidline-height2&>acolorblackpadding8px5%displayblockwidth90%&>spandisplayinline-blockwidth50%.lfloatleftfont-size16px.rfloatrighttext-alignrightfont-size12pxcolor#CCC@-webkit-keyframesrotationfromtransformrotate(0deg)到-webkit-transformrotate(360deg).fade-enter-activetransitionall.3sease.fade-leave-activetransitionall.3scubic-bezier(1.0,0.5,0.8,1.0).fade-enter,.fade-离开主动变换translateY(-20px)opacity0研究了2天终于有了回报。播放器已经制作完成，但还需要完善。我总是离不开jQuery的DOM操作。刚开始学习VUE，到现在还经常使用DOM操作。所以，写出来的代码还有很多不足之处，待以后多多学习，再完善。做播放器的想法是从我之前做的这篇关于webapp的文章《vuejs2 + wp-rest-api开发web app》得到的启发。因此，提供另一个音乐播放器来查看vue。1.效果GIF动画有3M以上。如未显示，请稍候观看。我用自己的一点创意做了一个猪头。2.相关代码本程序只使用了vue的ajax框架vue-resource，没有使用vue-router，所以在安装vue-cli的时候可以跳过vue-router。本程序只有一个组件，即只有一个使用了css预处理语言stylus的vue文件。使用的json数据由本站相关php代码生成（仅做演示）。如果在本地搭建环境，本地也可以写json。本demo已经使用cordova制作成Androidapk文件。想要体验的请点这里下载源码提交到github（记得给我star）：https://github.com/king2088/v...演示地址：http://www.egtch.com/t_works/...1、生成json的php如下（代码很简单，定义一串json数据，然后显示即可）：2、app.vue代码{{music.name}}-{{music.singer}}
