css滑动的效果 CSS3 transition 属性
一直以为只有js才能实现一些滑动效果,巧合,今天偶然看到一篇文章,知道了..css滑动的效果.想想也挺简单的;
css:
a:hover {
padding-left: 6px;
}
<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>
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;
}