2012年9月10日 星期一

純CSS動畫選單

217841_4446157961866_1198865801_n

CSS3真是好玩的東西,這是純CSS3做的選單動畫,可以把source code copy回去就可以用了。

準備類似下面的結構
<ul id="panel">
<li><h3>MENU</h3></li>
<li class="animation"><a href="#">Link 1</a></li>
<li class="animation"><a href="#">Link 2</a></li>
<li class="animation"><a href="#">Link 3</a></li>
<li class="animation"><a href="#">Link 4</a></li>
<li class="animation"><a href="#">Link 5</a></li>
</ul>


寫法也很簡單,加一下transform
  1. transition: all 0.4s ease-in-out;   

然後設滑過去後讓他動起來。

  1. transform:translateX(25px);  

其他大同小異,研究一下原始碼就知道了。

Demo


反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...