之前在Joomla! 看過 Dashboard 的 Box Mouseover 時有揭頁效果, 感到甚為神奇, 最初以為是用 js 做出的效果, 同事還用了半天時間去研究, 最後都沒研究成功, 我在腦海中也想不出方法來...

今天發白日夢時突然靈機一動, 想到了前一陣子學會的 CSS3 Transition Animation, 用 CSS3 不就可以做到！！坐言起行, 於是馬上便來實作, 果然成功做到了想要的效果 ( 請用firefox或chrome )

代碼如下:

CSS3 提供一個簡單的語法用以制作動態變換效果而不需要使用到 Flash 或 javascript, 它的使用方法非常簡單, 只需在你想要制作特效的原樣式中加入 transition 屬性即可, 以下是一個簡單的例子, 對應的效果可參考頂部的菜單列:

#top_menu li a {
	color: #FFF;
	padding: 5px 10px;
	border-radius: 10px;
	text-decoration: none;

	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
}
#top_menu li a:hover {
	background-color: #F9C;
	color: #09F;
}

The result you can refer to the top menu on this page by using firefox or chrome.