这是格子同学提供的一款由CSS3制作的迷你播放器面板的案例（时间效果是由jQuery完成）。这个案例仿Mac电脑的窗口风格设计，整个面板分成三部分，顶部由标题和最小化、最大化以及关闭按钮组成（这三个按钮功能未添加）；中间部分类似于播放器一样，左边是播放的按钮（播放、中止和停止）三个组成，以及播放时间的计算（时间效果由jQuery完成）；最底下部分是整个时间的统计文本。整体效果清爽，设计层次清晰。当然大家关注的还是使用了什么技术，这里我们仅仅面板效果来说的话，并不复杂，只使用了CSS3的圆角、阴影、渐变和@font-face几个简单的属性，感兴趣的话继续往下看代码吧。
HTML结构
接下来我们先来看看其使用的结构
< div class="box">
< div class="boxt">
< span class="fr minitxt"> Mini Player< /span>
< span class="circle">
< em class="close"> < /em>
< em class="max"> < /em>
< em class="min"> < /em>
< /span>
< /div>
< div class="boxm">
< div class="boxml">
< a class="btn pause" id="controlBtn"> on< /a>
< a class="btn stop" id="stopBtn"> stop< /a>
< /div>
< div class="boxmr">
< div class="taketime" id="takeTime"> 00:00:00< /div>
< span> HOUR< /span>
< span> MIN< /span>
< span> SEC< /span>
< /div>
< /div>
< div class="boxb">
< span class="fr" id="totalTime"> 01:22:30< /span>
< span> Totel time< /span>
< /div>
< /div>
CSS代码
结构我们就不多说了，大家还是看样式吧，详细的请看里面注解：
body{
padding:0;
margin:0;
background:#cbd4da;
font-size:12px;
}
/*播放器面板容器*/
.box{
width:320px;
margin:100px auto;
background:#fff;
border:solid 1px #979797;
border-radius:6px;/*制作圆角*/
box-shadow:0 0 5px 6px rgba(0,0,0,0.05);/*面板阴影*/
}
/*播放器面板头部*/
.boxt{
height:40px;
line-height:40px;
padding:0 16px;
}
.boxt .minitxt{
font-size:bold 14px Arial;
color:#7e97ab;
}
/*播放器面板左边按钮（仿mac窗口按钮效果）*/
.boxt .circle em{
display:inline-block;
background:#e4e4e4;
border:solid 1px #c7c9cb;
border-radius:8px;
width:12px;
height:12px;
margin-right:8px;
border:none;
border-radius:6px;
cursor: pointer;
}
/*关闭面板按钮*/
.boxt .circle .close{
box-shadow:inset 0px 1px 1px rgba(83,11,8,.5);
background:-*-radial-gradient(top center, circle, #fff, #af2b24, #ec8e89);
}
/*面板最大化按钮*/
.boxt .circle .max{
box-shadow:inset 0px 1px 1px rgba(117,38,27,.5);
background:-*-radial-gradient(top center, circle, #fff, #ce712d, #fcdf7d);
}
/*面板最小化按钮*/
.boxt .circle .min{
box-shadow:inset 0px 1px 1px rgba(34,75,15,.5);
background:-*-radial-gradient(top center, circle, #fff, #74a94e, #bbdd83);
}
/*面板中间内容*/
.boxm{
border:solid 1px #dedede;
border-width:1px 0;
padding:20px 16px;
overflow:hidden;
}
/*面板播放按钮*/
.boxm .boxml{
float:left;
padding-top:5px;
}
/*面板控制按钮基本样式*/
.boxm .boxml .btn{
display:inline-block;
width:45px;
height:40px;
padding-top:5px;
border:none;
border-radius:25px;
text-align:center;
font-size:0;cursor:pointer;
box-shadow:inset 0 1px 1px rgba(100,100,100,.3);
background:-*-linear-gradient(top,#e6e6e6,#f2f1f1);
}
/*font face 制作icon*/
@font-face{
font-family:"playericon";
src:url(font/fontello.eot);
src:url(font/fontello.eot#iefix) format("embedded-opentype"),
url(font/fontello.woff) format("woff"),
url(font/fontello.ttf) format("truetype"),
url(font/fontello.svg) format("svg");
font-weight:normal;
font-style:normal;
}
.btn:after{
font-family:"playericon";
display:inline-block;
width:35px;
height:35px;
border:none;
border-radius:20px;
font-size:18px;
line-height:35px;
text-align:center;
box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);
background:-*-linear-gradient(top,#fff,#e9e9e9);
}
/*播放icon*/
.on:after{
content:"\25B6";
color:#475057;
}
/*停止icon*/
.stop:after{
content:"\25A0";
color:#cf6767;
}
/*中止icon*/
.pause:after{
content:"\2389";
color:#475057;
}
.btn:hover:after{
color:#19a6e4;
box-shadow:0 -1px 0px 1px #ccc;
}
/*面板时间部分*/
.boxm .boxmr{
font-family:Arial;
color:#666;
text-align:right;
overflow: hidden;
}
.boxm .taketime{
font-size:30px;
}
.boxm span{
display:inline-block;
padding:0 10px;
font-size:9px;
-webkit-text-size-adjust:none;
}
/*面板底部样式*/
.boxb{
height:40px;
line-height:40px;
padding:0 16px;
border-top:solid 1px #fff;
background:#eee;
font-size:14px;
font-family:Arial;
color:#999;
border-radius:6px;
}
.fr{float:right;}
到这里我们就制作出一个迷你播放器面板了，可能大家会说，怎么时间不出会来呢？那是demo中添加了jq代码实现的时间效果，如果你感兴趣，可以查看代码源码。这里不介绍jQuery代码实现过程。当然大家也可以进入这里查看
如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-create-mini-player.html