เขตก่อสร้าง-เก็บของ-ออกเเบบ

ลำดับตอนที่ #9 : Dek-d :: Music Box

<style type="text/css">

#ongaku {

position:fixed;

bottom:15px;

left:15px;

width:30px;

height:30px;

border:4px double #c6c6c6; /* โค้ดสีกรอบนอกวงกลม*/

background-color:#fff;

border-radius:30px;

opacity:.6;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-ms-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

}

 

#gaku {

width:24px;

height:24px;

margin-top:3px;

margin-left:3px;

overflow:hidden;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-ms-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

}

#kero {

height:26px;

margin-top:5px;

}

 

#kero img {

margin-right:10px;

margin-left:3px;

margin-top:-2px;

}

#kero embed, #kero {

-webkit-transition: all 0.6s ease-in-out;

 -moz-transition: all 0.6s ease-in-out;

 -ms-transition: all 0.6s ease-in-out;

-o-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;

}

#ongaku:hover {

opacity:1;

width:80px;

}

#ongaku:hover #gaku {

width:74px;

}

#ongaku:hover #kero {

margin-left:-50px;

}</style>

<div id="ongaku">

<div id="gaku">

<div id="kero">

<table cellpadding="0">

<tbody>

<tr>

<td>

<img src="http://media.tumblr.com/tumblr_m7w2izzY0j1r6o8v2.gif" /></td>

<td>

<embed align="middle" height="10" name="billy" quality="high" src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k003.kiwi6.com/hotlink/tsh9gurfzq/Pandora_Hearts_-_Will_Piano_.mp3&t0=Will&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></embed></td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

CR :: http://writer.dek-d.com/bananajub555/story/viewlongc.php?id=806042&chapter=75