@font-face { font-family: 'fontello'; src: url('font/fontello.eot?72550380'); src: url('font/fontello.eot?72550380#iefix') format('embedded-opentype'), url('font/fontello.woff?72550380') format('woff'), url('font/fontello.ttf?72550380') format('truetype'), url('font/fontello.svg?72550380#fontello') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-weibo:before { content: '\e805'; } .icon-play:before { content: '\e806'; } .icon-pause:before { content: '\e807'; } .icon-to-start:before { content: '\e808'; } .icon-to-end:before { content: '\e809'; } .icon-list:before { content: '\e80a'; } .icon-menu:before { content: '\e80b'; } .icon-volume-off:before { content: '\e800'; } .icon-volume-down:before { content: '\e801'; } .icon-volume-up:before { content: '\e802'; } .aplayer { font-family: Arial, Helvetica, sans-serif; margin: 5px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); border-radius: 2px; height: 66px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .aplayer-pic { position: relative; float: left; height: 100%; width: 66px; } .aplayer-pic img { height: 100%; width: 100%; border-radius: 2px 0 0 2px; } .aplayer-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); } .aplayer-button { position: absolute; color: #fff; border-radius: 50%; opacity: 0.8; cursor: pointer; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } .aplayer-button:hover { opacity: 1; } .aplayer-hide { display: none; } .aplayer-play { width: 26px; height: 26px; border: 2px solid #fff; top: 50%; left: 50%; margin: -15px 0 0 -15px; } .aplayer-play .icon-play { position: absolute; top: 2px; left: 4px; font-size: 20px; } .aplayer-pause { width: 16px; height: 16px; border: 2px solid #fff; bottom: 4px; right: 4px; } .aplayer-pause .icon-pause { position: absolute; top: 2px; left: 2px; font-size: 12px; } .aplayer-info { margin-left: 66px; padding: 17px 7px 0 10px; } .aplayer-music { margin-bottom: 17px; } .aplayer-title { font-size: 14px; } .aplayer-author { font-size: 12px; color: #666; } .aplayer-music a { margin-left: 20px; font-size: 14px; color: #000; } .aplayer-music a:hover { color: #E90F24; } .aplayer-controller { position: relative; } .aplayer-bar-wrap { margin-right: 110px; } .aplayer-bar { position: relative; height: 2px; width: 100%; background: #cdcdcd; cursor: pointer; } .aplayer-loaded { position: absolute; left: 0; top: 0; bottom: 0; background: #aaa; height: 2px; transition: all 0.5s ease; } .aplayer-played { position: absolute; left: 0; top: 0; bottom: 0; background: #b7daff; height: 2px; } .aplayer-thumb { position: absolute; top: 0; right: 0; margin-top: -4px; margin-right: -10px; height: 8px; width: 8px; border: 1px solid #b7daff; border-radius: 50%; background: #fff; cursor: pointer; } .aplayer-thumb:hover { background: #b7daff; } .aplayer-time { position: absolute; right: 0; bottom: -5px; color: #999; font-size: 11px; } .icon-volume-down { color: #666; font-size: 15px; margin-left: 7px; }