css滑动的效果

一直以为只有js才能实现一些滑动效果,巧合,今天偶然看到一篇文章,知道了..css滑动的效果.想想也挺简单的;

css:
a:hover {
    padding-left: 6px;
 }

 

<ul>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
   <li>
      <a href="#"> Hover Over Me </a>
   </li>
</ul>

这种效果有点生硬.
不生硬的用法是这种:

ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }
 a:hover {
    padding-left: 6px;
 }

transition的两个属性(缓动类型,持续时间);
原文链接: http://sd.csdn.net/a/20110105/289530.html