Hover Music Box
12.02.2012, 12/02/2012 - Permalink | 0 Comments
给 Li Wen.
//看不清楚请点击放大。
Bloskins
Dashboard- Template
在</style> 上面放以下代码
#music{position:fixed !important;right:30px; padding-top:12px;
top:25px;padding-bottom:12px;text-align:center;height:15px;
width:35px;
overflow:hidden;border:2px dashed #ffd6d6;
-moz-border-radius: 17px 17px 17px 17px;border-radius:17px 17px 17px 17px;-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;background: #fff;z-index:999;}#music:hover{border:1px dashed #ffd6d6;
padding:5px;height:75px;
width:200px;
-moz-border-radius: 0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}
红色:播放器的位置
橙色 -- 音乐器的高度
黄色 -- 音乐器的宽度
蓝色 -- 外框的厚度
紫色 -- 框框的种类
粉色 -- 框框的颜色
蓝色 -- 框框的外形
框框的形状代码如下:
A
B
C
D
D
E
Example A
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
Example B
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
Example C
border-bottom-right-radius: 25px 50px;
Example D
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
Example E
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
Example F
-moz-border-radius: 35px;
border-radius: 35px;
放在 <html> 的下面
× 随你喜欢,你可以放在你想要的地方。只要有效果,就可以了。
<div id="music">
●_⌒
<br><br>
<center>
音乐播放器的代码
<br>要显示的字</center></div>
红色-音乐播放器的代码
蓝色-要显示的字
标签: 博客教学