css滑动的效果 CSS3 transition 属性

一直以为只有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://blog.csdn.net/nighted/article/details/6124477
使用说明:http://www.w3school.com.cn/cssref/pr_transition.asp
 
p.s transition属性应用于具有动态元素上。换句话讲,就是 a:hover 和 transition 共存。
 
还有可应用到颜色上面。

ul a {
-webkit-transition: background-color .6s;
-moz-transition: background-color .6s;
-o-transition: background-color .6s;
transition: background-color .6s;
}

posted @ 2016-05-12 14:16  stma  阅读(3791)  评论(0)    收藏  举报