蘋果風DOCK

試著練習了一下CSS三的特性，但也不知道要練什麼或是做什麼。看著UBUNTU的WBAR。於是，就…試試看吧。所以標題不應是APPLE DOCK，應該是ubuntu wbar才對，但，我想這個標題應該比較好讓人理解，所以還是用這蘋果風DOCK這個標題。樣式就是我桌面上的wbar，就是長這樣…嗯。

其實說是css3的練習，但真的用到的只有transition和color:rgba而以…。所以。照理講，就算是不支援css3，看起來應該也都還可以，只是沒有動畫而以。目前用google chrome試是ok的，不過我也只用google chrome試過而以…等等灌了firefox在試試。

CSS

body{
background:url(bg.jpg) top center;
}
*{
margin:0px;
padding:0px;
}
#dock{
position:fixed;
bottom:10px;
left:50%;
margin-left:-250px;
}
#dock ul{
background:rgba(225,225,225,0.1);
-webkit-border-radius:40px;
-webkit-box-shadow:0 0 20px rgba(000,000,000,0.3);
padding: 0 ;
height:70px;
 -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#dock ul:hover{
margin-left:-25px;
}
#dock ul li{
float:left;
position:relative;
width:70px;
height:90px;
margin-top:-20px;
 -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#dock ul li a{
padding:0px;
margin:0px;
display:block;
height:100%;
}
#dock ul li img{
width:60px;
position:absolute;
bottom:5px;
left:50%;
margin-left:-30px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#dock ul li:hover{
width:110px;
}
#dock ul li:hover img{
width:110px;
z-index:10;
margin-left:-50px;
}