mePlayer/dist/meplayer.min.css

.meplayer-container{font-family:Helvetica,Tahoma,Arial,STXihei,'华文细黑','Microsoft YaHei','微软雅黑',SimSun,'宋体',Heiti,'黑体',sans-serif;position:relative;box-sizing:border-box;width:100%;height:90px;background:#FFF;box-shadow:0 0 20px rgba(59,59,177,.18)}.meplayer-container .meplayer-info{font-weight:300;position:relative;left:0;opacity:1}.meplayer-container .meplayer-info-cover{position:absolute;top:0;left:0;overflow:hidden;height:90px;padding-right:20px;-webkit-transition:all .6s cubic-bezier(0,.36,.51,1.39);transition:all .6s cubic-bezier(0,.36,.51,1.39)}.meplayer-container.meplayer-isplaying .meplayer-info-cover{left:-90px;opacity:0}.meplayer-container .meplayer-info-cover img{width:78px;height:78px;border:6px solid #FFF;box-shadow:0 0 20px rgba(59,59,177,.35)}.meplayer-container .meplayer-meta{float:left;margin-left:110px;-webkit-transition:all .6s cubic-bezier(0,.36,.51,1.39);transition:all .6s cubic-bezier(0,.36,.51,1.39)}.meplayer-container.meplayer-isplaying .meplayer-meta{margin-left:10px;-webkit-transform:scale(.85,.85);transform:scale(.85,.85)}.meplayer-container.meplayer-isplaying .meplayer-meta .meplayer-meta-title{margin-top:4px}.meplayer-container.meplayer-isplaying .meplayer-meta .meplayer-meta-time-tick{-webkit-transition:all .6s cubic-bezier(0,.36,.51,1.39) .65s;transition:all .6s cubic-bezier(0,.36,.51,1.39) .65s;-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.meplayer-container .meplayer-meta .meplayer-meta-time-tick{font-size:13px;margin-top:30px;-webkit-transform:translateY(10px);transform:translateY(10px);letter-spacing:1px;opacity:0;color:rgba(0,0,0,.6)}.meplayer-container .meplayer-meta-title{font-size:14px;margin-top:27px;margin-bottom:2px;-webkit-transition:all .6s cubic-bezier(0,.36,.51,1.39);transition:all .6s cubic-bezier(0,.36,.51,1.39);letter-spacing:1px;color:#6A6B6F}.meplayer-container .meplayer-meta-author{font-size:12px;color:#CECED6}.meplayer-container .meplayer-spectrum{position:absolute;top:50%;left:50%;display:block;width:0;height:30px;margin-top:-15px;margin-left:-120px;-webkit-transition:all .7s cubic-bezier(.17,.67,.45,1.26) .1s;transition:all .7s cubic-bezier(.17,.67,.45,1.26) .1s;-webkit-transform:translateX(110px);transform:translateX(110px);opacity:0}.meplayer-container.meplayer-isplaying .meplayer-spectrum{width:220px;-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.meplayer-container.meplayer-haslrc .meplayer-spectrum{display:none}.meplayer-container .meplayer-lyric{position:absolute;z-index:-2;top:50%;left:50%;overflow:hidden;width:220px;height:100%;margin-top:-45px;margin-left:-120px;-webkit-transition:all 1s;transition:all 1s;-webkit-transform:translateY(15px);transform:translateY(15px);opacity:0}.meplayer-container.meplayer-isplaying .meplayer-lyric{z-index:0;-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.meplayer-container .meplayer-lyric-area{font-size:12px;margin-top:35px;-webkit-transition:-webkit-transform .7s;transition:-webkit-transform .7s;transition:transform .7s;text-align:center;opacity:0;color:rgba(0,0,0,.7)}.meplayer-container .meplayer-lyric-area p{line-height:0;width:100%;margin:0;padding:0;-webkit-transition:all .6s;transition:all .6s;opacity:0}.meplayer-container.meplayer-isplaying .meplayer-lyric-area p{line-height:20px}.meplayer-container .meplayer-haslrc .meplayer-lyric-area{display:block}.meplayer-container-mini .meplayer-duration,.meplayer-container-mini .meplayer-info,.meplayer-container-mini .meplayer-loadingsign,.meplayer-container-mini .meplayer-lyric,.meplayer-container-mini .meplayer-spectrum,.meplayer-container-mini .meplayer-timeline-bg,.meplayer-container-mini.meplayer-changing-theme .meplayer-volume-bg,.meplayer-container.meplayer-changing-theme .meplayer-volume-bg{display:none}.meplayer-container.meplayer-isplaying .meplayer-lyric-area{opacity:1}.meplayer-container .meplayer-lyric-area .meplayer-lyric-current{font-size:1.1em;opacity:1}.meplayer-container .meplayer-lyric-area .meplayer-lyric-next,.meplayer-container .meplayer-lyric-area .meplayer-lyric-pre{opacity:.35}.meplayer-container .meplayer-control{position:relative;float:right;margin-right:40px}.meplayer-container .meplayer-volume-bg{position:absolute;z-index:-1;width:100%;height:100%;-webkit-transition:all .8s;transition:all .8s;opacity:0;background:rgba(255,255,255,.8)}.meplayer-container.meplayer-adjusting-volume .meplayer-volume-bg{z-index:20;opacity:1}.meplayer-container .meplayer-volume{font-size:50px;width:60px;margin:13px auto 0;-webkit-transition:all .9s;transition:all .9s;text-align:center;color:rgba(150,150,150,.75)}.meplayer-container .meplayer-volume-progress{height:4px;-webkit-transition:width .2s;transition:width .2s;border-radius:1px;background:rgba(150,150,150,.75)}.meplayer-container .meplayer-control-play{position:absolute;top:-25px;right:0;width:50px;height:50px;cursor:pointer;-webkit-transition:top .6s cubic-bezier(0,.74,.61,1.35);transition:top .6s cubic-bezier(0,.74,.61,1.35);text-align:center;color:#D94240;border-radius:50%;background:#FFF;box-shadow:0 0 10px rgba(59,59,177,.22)}.meplayer-container .meplayer-control-play:hover{-webkit-animation:breath 2s infinite alternate;animation:breath 2s infinite alternate}.meplayer-container.meplayer-isplaying .meplayer-control-play{top:20px;-webkit-animation:breath 2s infinite alternate;animation:breath 2s infinite alternate}.meplayer-container .meplayer-control-play i{line-height:50px;position:absolute;left:50%;margin-left:-7px;-webkit-transition:all .5s;transition:all .5s}.meplayer-container .meplayer-control-play .icon-play{-webkit-transform:translateX(2px);transform:translateX(2px);opacity:1}.meplayer-container.meplayer-isplaying .meplayer-control-play .icon-play{-webkit-transform:translateX(8px);transform:translateX(8px);opacity:0}.meplayer-container .meplayer-control-play .icon-pause{-webkit-transform:translateX(-8px);transform:translateX(-8px);opacity:0}.meplayer-container.meplayer-isplaying .meplayer-control-play .icon-pause{-webkit-transform:translateX(-1px);transform:translateX(-1px);opacity:1}.meplayer-container .meplayer-duration,.meplayer-container .meplayer-loadingsign{font-size:12px;position:absolute;right:40px;bottom:24px;-webkit-transition:all .6s cubic-bezier(0,.74,.61,1.35);transition:all .6s cubic-bezier(0,.74,.61,1.35);letter-spacing:1px;color:rgba(0,0,0,.6)}.meplayer-container.meplayer-isplaying .meplayer-duration,.meplayer-container.meplayer-isplaying .meplayer-loadingsign{z-index:-1;bottom:5px;-webkit-transform:scale(.5,.5);transform:scale(.5,.5);opacity:0}.meplayer-container .meplayer-loadingsign,.meplayer-container.meplayer-isloading .meplayer-duration{opacity:0}.meplayer-container.meplayer-isloading .meplayer-loadingsign{opacity:1}.meplayer-container .meplayer-duration i,.meplayer-container .meplayer-loadingsign i{margin-right:3px;-webkit-transition:all .7s;transition:all .7s;-webkit-transform:scale(.9,.9);transform:scale(.9,.9);color:rgba(217,66,64,.5)}.meplayer-container.meplayer-isplaying .meplayer-duration i{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}.meplayer-container .meplayer-timeline-bg{position:absolute;bottom:0;width:100%;height:8px}.meplayer-container .meplayer-timeline{position:absolute;bottom:0;overflow:hidden;width:100%;height:2px;-webkit-transition:all .5s;transition:all .5s;-webkit-transform:translateY(2px);transform:translateY(2px);opacity:0;background:rgba(231,231,239,.8)}.meplayer-container.meplayer-isplaying .meplayer-timeline{cursor:pointer;-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.meplayer-container.meplayer-isplaying .meplayer-timeline-bg:hover .meplayer-timeline{height:8px}.meplayer-container .meplayer-timeline .meplayer-timeline-passed{position:absolute;bottom:0;width:0;height:100%;background:#D94240}@-webkit-keyframes breath{0%{box-shadow:0 0 35px rgba(59,59,177,.22)}100%{box-shadow:0 0 10px rgba(59,59,177,.33)}}@keyframes breath{0%{box-shadow:0 0 35px rgba(59,59,177,.22)}100%{box-shadow:0 0 10px rgba(59,59,177,.33)}}.meplayer-container-mini{position:relative;width:90px;height:90px;background:#FFF;border-radius:50%;box-shadow:0 0 20px rgba(59,59,177,.18)}.meplayer-isplaying.meplayer-container-mini{-webkit-animation:breath 2s infinite alternate;animation:breath 2s infinite alternate}.meplayer-container-mini .meplayer-control-play{width:90px;height:90px;position:absolute;top:50%;font-size:26px;line-height:90px;left:50%;margin-top:-45px;margin-left:-45px;color:#D94240}.meplayer-container-mini .meplayer-control-play [class^=icon-]{line-height:90px;position:absolute;left:50%;margin-left:-11px;-webkit-transition:all .5s;transition:all .5s;cursor:pointer}.meplayer-container-mini .meplayer-control-play .icon-play{-webkit-transform:translateX(4px);transform:translateX(4px);opacity:1}.meplayer-container-mini.meplayer-isplaying .meplayer-control-play .icon-play{-webkit-transform:translateX(16px);transform:translateX(16px);opacity:0}.meplayer-container-mini .meplayer-control-play .icon-pause{-webkit-transform:translateX(-16px);transform:translateX(-16px);opacity:0}.meplayer-container-mini.meplayer-isplaying .meplayer-control-play .icon-pause{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.meplayer-container-mini .meplayer-volume-bg{z-index:-1;position:absolute;width:100%;height:100%;background:rgba(255,255,255,.98);line-height:90px;border-radius:50%;text-align:center;color:rgba(0,0,0,.9);font-size:30px;-webkit-transition:all .8s;transition:all .8s}.meplayer-container-mini.meplayer-adjusting-volume .meplayer-volume-bg{opacity:1;z-index:0}.meplayer-container-mini.meplayer-adjusting-volume .meplayer-volume-bg i{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}.meplayer-container-mini .meplayer-volume-bg i{-webkit-transition:all .7s;transition:all .7s;opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}@-webkit-keyframes breath{0%{box-shadow:0 0 35px rgba(59,59,177,.25)}100%{box-shadow:0 0 10px rgba(59,59,177,.33)}}@keyframes breath{0%{box-shadow:0 0 35px rgba(59,59,177,.25)}100%{box-shadow:0 0 10px rgba(59,59,177,.33)}}.animate-spin{-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear;display:inline-block}@-moz-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-o-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@-ms-keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-moz-transform:rotate(0);-o-transform:rotate(0);-webkit-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(359deg);-o-transform:rotate(359deg);-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@font-face{font-family:fontello;src:url(fonts/fontello.eot?77128880);src:url(fonts/fontello.eot?77128880#iefix) format('embedded-opentype'),url(fonts/fontello.woff?77128880) format('woff'),url(fonts/fontello.ttf?77128880) format('truetype'),url(fonts/fontello.svg?77128880#fontello) format('svg');font-weight:400;font-style:normal}[class*=" icon-"]:before,[class^=icon-]:before{font-family:fontello;font-style:normal;font-weight:400;speak:none;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-play:before{content:'\e801'}.icon-pause:before{content:'\e802'}.icon-clock:before{content:'\e803'}.icon-volume:before{content:'\e804'}.icon-spin:before{content:'\e800'}