CSS3制作迷你播放器面板

发布于大漠

11 年前

这是格子同学提供的一款由CSS3制作的迷你播放器面板的案例（时间效果是由jQuery完成）。这个案例仿Mac电脑的窗口风格设计，整个面板分成三部分，顶部由标题和最小化、最大化以及关闭按钮组成（这三个按钮功能未添加）；中间部分类似于播放器一样，左边是播放的按钮（播放、中止和停止）三个组成，以及播放时间的计算（时间效果由jQuery完成）；最底下部分是整个时间的统计文本。整体效果清爽，设计层次清晰。当然大家关注的还是使用了什么技术，这里我们仅仅面板效果来说的话，并不复杂，只使用了CSS3的圆角、阴影、渐变和@font-face几个简单的属性，感兴趣的话继续往下看代码吧。

demo download

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代码实现过程。当然大家也可以进入这里查看

demo download

如需转载，烦请注明出处：https://www.fedev.cn/demo/css3-create-mini-player.html

air max 90 essential grey