Entries Profile stuff Affies Credit

<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d6253663951978302670\x26blogName\x3d//Yi+Qing.com\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://joey98place.blogspot.com/search\x26blogLocale\x3dzh_CN\x26v\x3d2\x26homepageUrl\x3dhttp://joey98place.blogspot.com/\x26vt\x3d-8461348219948985447', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>
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 


-moz-border-radius-bottomright: 25px 50px;
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>
红色-音乐播放器的代码
蓝色-要显示的字



  预览,没问题就保存。


标签:





T i m e M a c h i n e