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

在平时我们浏览网页的时候,当鼠标滑过某个链接时,经常会看到这样的效果,链接往右滑动了一下,其实想实现这种效果很简单,只要一个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;
 }

转载于:https://www.cnblogs.com/puzizyx/p/5689061.html

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页