用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);
}

预览效果如下：

支持的浏览器有Safari 4.0.5, Chrome 5.0.342.9 and Firefox 3.6

用css3制作一个Music Player Menu相关推荐

用CSS3制作一个风车
开发工具与关键技术:用CSS3制作一个风车作者:李波首先我的风车html如下: Css部分:需要给四个叶子的设置其对应的样式:首先是第一页的叶子如下图(这里展示第一个叶子的样式),为了突出效果我将 ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便,流畅,如何制作一个最简单的会旋转的立方体呢?话不多说,直接上代码! html代码如下,需要一个大的div包裹六个div作为立方体的六个表面 < ...
CSS3制作一个简单的进度条
这里只是一个小demo,一个用CSS3写的进度条. 如图所示: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo ...
用css3制作一个搜索框效果
搜索框的形式有多种多样,今天试着用css3做了一个搜索框, html代码如下: <form class="form-wrapper"> <input type ...
php教程制作相册实例,H5和CSS3制作一个相册的代码实例
纯CSS3打造相册效果,感觉还不错,这里与大家分享下,最主要的是没有使用一行js,这才是亮点今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了, ...

用css3制作一个Music Player Menu

用css3制作一个Music Player Menu相关推荐

最新文章

热门文章