用css3制作一个Music Player Menu
用css3制作一个Music Player Menu，主要应用了css3 的box-shadow,border-radius,text-shadow,grident,等属性
html代码如下：
<div id="content"> CSS3 Music Player Menu <br>
<br>
<div class="music-player">
<div class="music-player-inner">
<div class="music-player-toggle"> <span class="music-player-toggle-inner">II</span> </div>
<div class="music-player-music">
<div class="music-player-music-inner">
<div class="music-player-content"> Artist Name - Song Title <br>
2:00
<div class="music-player-slider"> <span class="music-player-played"> <span class="music-player-pointer"> </span> </span> </div>
-1:59 </div>
<span class="music-player-shade"></span> </div>
</div>
</div>
</div>
</div>
css代码如下：
* {
margin:0;
padding:0;
}
body {
font-family:Georgia, "Times New Roman", Times, serif;
background:#f2f2ea;
text-align:center;
color:#464530;
text-shadow:0 1px 0 #fff;
font-size:30px;
font-weight:bold;
letter-spacing:-1px;
margin-top:8%;
}
a, a:visited {
color:#464530;
text-decoration:none;
}
label {
font-size:20px;
}
#content {
display:block;
width:800px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.music-player {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
width:600px;
height:100px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(128,132,135)));
background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(128,132,135) 100%);
position:relative;
overflow:hidden;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.8);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.8);
box-shadow:0 1px 2px rgba(0, 0, 0.0.8);
}
.music-player-inner {
display:inline-block;
width:600px;
height:100px;
padding-top:3.5%;
font-size:25px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border-top:1px solid rgba(255,255,255,0.6);
}
.music-player-toggle {
margin-left:1em;
display:inline-block;
width:50px;
height:50px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
-webkit-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
-moz-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
}
.music-player-toggle-inner {
display:inline-block;
width:50px;
height:45px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(252,252,252)), color-stop(1, rgb(128,132,135)));
background:-moz-linear-gradient(center top, rgb(252,252,252)25%, rgb(128,132,135)100%);
font-weight:bolder;
font-size:35px;
padding-top:5px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
border:2px solid #696b6b;
text-align:center;
cursor:pointer;
}
.music-player-music {
margin-left:2px;
display:inline-block;
width:450px;
height:50px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(227,233,195)), color-stop(1, rgb(198,218,149)));
background:-moz-linear-gradient(center top, rgb(227,233,195) 25%, rgb(198,218,149) 100%);
border-top:1px solid rgba(255,255,255,0.6);
-webkit-box-shadow:0 -2px 1px rgba(0,0,0,0.4);
box-shadow:0 -2px 1px rgba(0,0,0,0.4);
-moz-box-shadow:0 -2px 1px rgba(0,0,0,0.4);
position:relative;
}
.music-player-music-inner {
display:inline-block;
width:450px;
height:42px;
padding-top:2%;
font-size:25px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.music-player-shade {
top:0;
left:0;
display:inline-block;
position:absolute;
width:450px;
height:25px;
background:rgba(255,255,255,0.2);
}
.music-player-content {
text-align: center;
font-size: 12px;
letter-spacing: -.08em;
}
.music-player-slider {
margin-top:0.5em;
display:inline-block;
width:350px;
height:9px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
background:#a9b09a;
-webkit-box-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:0 -1px 0 rgba(0,0,0,0.4);
-moz-box-shadow:0 -1px 0 rgba(0,0,0,0.4);
text-align:left;
}
.music-player-played {
display:inline-block;
width:175px;
height:9px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(146,150,131)), color-stop(1, rgb(80,85,65)));
background:-moz-linear-gradient(center top, rgb(146,150,131)25%, rgb(80,85,65)100%);
text-align:right;
}
.music-player-pointer {
margin-left:14.2em;
display:inline-block;
width:7px;
height:7px;
background:#fff;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
}
预览效果如下：