www.gusucode.com > 看上去是笑脸，实际上是一款CSS3音乐播放器源码程序 > 看上去是笑脸，实际上是一款CSS3音乐播放器/html5smilemusicplayer/html5-smile-music-player/css/style.css

    /* Roboto Condensed */


/* Basic */
*{
	margin: 0;padding: 0; 
}
*:before, *:after { box-sizing: border-box; }
body { margin: 0; min-height: 100%; background: #EEE; font-family: 'Roboto Condensed', sans-serif; font-weight: 300;background: lightblue; }
a { color: #FFF; text-decoration: none; }
a:hover { color: #26C5CB; }
p { margin: 0; }
@font-face {font-family: 'iconfont';
	    src: url('../iconfont/iconfont.eot'); /* IE9*/
	    src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	    url('../iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
	    url('../iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	    url('../iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
	}


/* Centering */
#container, #progress,#canvas, #player, .cover{
	  position: absolute;
	  margin: auto;
	  top: 0;
	  left: 0;
	  right: 0;
  	  bottom: 0;
}

#container {
	  width: 350px;
	  height: 320px;/* 
	        perspective: 550px;
	  -webkit-perspective: 550px;
	         transform-style: preserve-3d;
	  -webkit-transform-style: preserve-3d; //perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。*/
}

#player {
  	width: 320px;
	height: 320px;
	overflow: hidden;
	z-index:3;
}

#progress {
	  width: 320px;
	  height: 320px;
	  z-index:2;     
	  transform: rotateY(180deg);
	  -webkit-transform: rotateY(180deg);
	  filter: blur(1.5px);
	  -webkit-filter: blur(1.5px);
}

#canvas{
	  width: 320px;
	  height: 320px;
	  z-index:1;
	  
}


/* Player Buttons */
.cover{
	top:30%;
	z-index:500;
}
.controls {
	  position: relative;
	  width: 100%;
	  height: 50%;
	  color: #fff;
	  text-align: center;
	  overflow: hidden;
}

.play_pause{
	  position: absolute;
	  left:0%;
	  top: 0;
	  width:24px;
	  height:24px;
	  color: #fff;
	  border: 0;
	  outline: 0;
	  text-align: center;
	  background: #fff;
	  border-radius: 100%;
	  cursor: pointer;
	  z-index: 10;
}
#replay{
	left: auto;
	right: 0;
	background:darkgreen ;
}

.play_pause:hover {
	  color: #26C5CB;
}
.play_pause i{
	display: block;
	line-height:24px;
	font-style: normal;
	font-family: 'iconfont';
	font-size:24px;
	color: darkgreen;
	cursor: pointer;
}
#replay i{
	font-size: 14px;
	color: #fff
}
#times{
	width:80px;
	height:20px;
	background: #000;
	border-radius: 10px;
	position: absolute;
	left:50%;
	margin-left: -40px;
	top:30%;
	line-height:20px;
	font-size:0.6em;
}		   
.voice{
	position: absolute;
	left: 50%;
	margin-left: -40px;
	top:0;
	-webkit-appearance: none !important;
}
/*.voice i{
	display: block;
	font-style: normal;
	font-family: 'iconfont';
	font-size:12px;
	color: darkgreen;
	cursor: pointer;
	float: left;
	margin-top:15px;
}*/
/* Volume */
input[type='range'] {
	  display: block;
	  margin:20px auto;
	  width: 80px;
      height: 2px; 
	  outline: 0;
	  cursor: pointer;
	  box-shadow: 1px 1px 3px 0 #000;
	  -webkit-appearance: none !important;
	  float: left;
}

input[type='range']::-webkit-slider-thumb {
	  background: #AEAEAE;
	  height: 6px;
	  width: 6px;
	  border-radius: 50%;
	  transition: .3s all linear;
	  -webkit-transition: .3s all linear;
	  -webkit-appearance: none !important;
}

input[type='range']:hover::-webkit-slider-thumb {
  	  background: darkgreen;
	  -webkit-transform:scale(2);
}



/* Song Info */
.info {
  	position: relative;
	  margin-top: 28px;
	  bottom: 10px;
	  color: #fff;
	  text-align: center;
}

.song {
	  font-size: 18px;
}

.author {
	  font-size: 14px;
	  margin-bottom: -8px;
}


/* ... */
.song,
.author,
.playlist a {
	  white-space: nowrap; 
	  overflow: hidden;
	  text-overflow: ellipsis;
}





/* Media Queries */
@media all and (max-width: 768px) {
	  #container, #player { width: 150px; height: 150px;}
	  #progress { width: 160px; height: 160px; margin-top: -5px; margin-left: -5px; }
	  label, .lyrics, .scroll { display: none; }
	  .cover { padding-top: 46px; }
	  button { margin: 4px; }
	  button:first-of-type, button:last-of-type { display: none; }
	  input[type='range'] { display: block; margin-top: -76px; height: 1px; }
	  .info { margin-top: 70px; }
	  .song { font-size: 12px; }
	  .author { font-size: 10px; }
}