码迷,mamicode.com
首页 > Web开发 > 详细

css动态效果---鼠标滑过右侧链接,文本向右滑动

时间:2016-07-20 17:50:18      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

技术分享在平时我们浏览网页的时候,当鼠标滑过某个链接时,经常会看到这样的效果,链接往右滑动了一下,其实想实现这种效果很简单,只要一个transition属性就可以实现,废话不多说,上代码:

The HTML 

<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>

The CSS

ul a {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
 }

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

css动态效果---鼠标滑过右侧链接,文本向右滑动

标签:

原文地址:http://www.cnblogs.com/puzizyx/p/5689061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!